> ## Documentation Index
> Fetch the complete documentation index at: https://api.fanvue.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# PageSelector

> A compact control for stepping through a small, known set of pages one at a time, showing the position as "current of total" between a back and forward arrow.

```tsx theme={null}
import { PageSelector } from "@fanvue/ui";
import type { PageSelectorProps } from "@fanvue/ui";
```

## Examples

## Default

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-pageselector--default&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="220" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="PageSelector — Default" />
</Frame>

```tsx theme={null}
import { PageSelector } from "@fanvue/ui";

<PageSelector totalPages={3} currentPage={1} />
```

## Disabled

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-pageselector--disabled&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="220" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="PageSelector — Disabled" />
</Frame>

```tsx theme={null}
import { PageSelector } from "@fanvue/ui";

<PageSelector totalPages={3} currentPage={2} disabled />
```

## Custom Label

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-pageselector--custom-label&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="220" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="PageSelector — Custom Label" />
</Frame>

```tsx theme={null}
import { PageSelector } from "@fanvue/ui";

<PageSelector
  totalPages={5}
  currentPage={2}
  formatLabel={(current, total) => `Page ${current} / ${total}`}
/>
```

## Middle Page

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-pageselector--middle-page&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="220" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="PageSelector — Middle Page" />
</Frame>

```tsx theme={null}
import { PageSelector } from "@fanvue/ui";

<PageSelector totalPages={3} currentPage={2} />
```

## Interactive

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-pageselector--interactive&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="220" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="PageSelector — Interactive" />
</Frame>

```tsx theme={null}
import { useState } from "react";
import { PageSelector } from "@fanvue/ui";

function Example() {
  const [page, setPage] = useState(1);
  return <PageSelector totalPages={3} currentPage={page} onPageChange={setPage} />;
}
```

## Props

## PageSelector

A compact control for stepping through a small, known set of pages one at a time, showing the position as "current of total" between a back and forward arrow. Use when the total is small and the exact page number matters less than moving between them, such as flicking through generated variants or a short carousel. Reach for `Pagination` instead when consumers need to jump to a specific numbered page.

<ParamField path="currentPage" type="number" required>
  Current active page (1-indexed).
</ParamField>

<ParamField path="totalPages" type="number" required>
  Total number of pages.
</ParamField>

<ParamField path="ariaLabel" type="string" default="Page selector">
  Accessible label for the `<nav>` landmark.
</ParamField>

<ParamField path="disabled" type="boolean" default="false">
  Whether the control is disabled.
</ParamField>

<ParamField path="formatLabel" type="((currentPage: number, totalPages: number) => string)" default={"(current, total) => `${current} of ${total}`"}>
  Formats the indicator between the arrows.
</ParamField>

<ParamField path="loop" type="boolean" default="false">
  Whether reaching either end wraps around to the other.
</ParamField>

<ParamField path="nextLabel" type="string" default="Next page">
  Accessible label for the next-page button.
</ParamField>

<ParamField path="onPageChange" type="((page: number) => void)">
  Callback fired when the active page changes. Receives the new 1-indexed page number.
</ParamField>

<ParamField path="previousLabel" type="string" default="Previous page">
  Accessible label for the previous-page button.
</ParamField>

## Exported types

Also exported from `@fanvue/ui`: `PageSelectorProps`.

***

**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)