[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [PageSelector](./x-components.pageselector.md) ## PageSelector variable Component that renders a pagination control with buttons for navigating between pages. It displays the current page, allows selecting other pages, and emits events when a page is selected. **Signature:** ```typescript _default: import("vue").DefineComponent)[]>; default: () => never[]; }; currentPage: { type: NumberConstructor; required: true; }; hiddenPage: { type: StringConstructor; default: string; }; itemClasses: { type: PropType<(isSelected: boolean) => string | Dictionary | (string | Dictionary)[]>; default: () => never[]; }; range: { type: NumberConstructor; default: number; }; scrollTarget: { type: StringConstructor; default: string; }; totalPages: { type: NumberConstructor; required: true; }; }>, { visiblePages: import("vue").ComputedRef; selectPage: (page: number | string) => void; }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly)[]>; default: () => never[]; }; currentPage: { type: NumberConstructor; required: true; }; hiddenPage: { type: StringConstructor; default: string; }; itemClasses: { type: PropType<(isSelected: boolean) => string | Dictionary | (string | Dictionary)[]>; default: () => never[]; }; range: { type: NumberConstructor; default: number; }; scrollTarget: { type: StringConstructor; default: string; }; totalPages: { type: NumberConstructor; required: true; }; }>> & Readonly<{}>, { buttonClasses: (string | Dictionary)[]; hiddenPage: string; itemClasses: (isSelected: boolean) => string | Dictionary | (string | Dictionary)[]; range: number; scrollTarget: string; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any> ```