JumpToPage

Stable
WCAG 2.2 evidence
RTL

A small "Go to page [48] of 120" control for long paged lists. Built on React Aria NumberField: the visible label names the field, the total describes it, typed text is parsed in the user's locale (native digits included) and the arrow keys step by 1 (WCAG 1.3.1, 2.1.1, 3.3.2, 4.1.2). Enter submits: a whole number from 1 to pageCount calls onGoToPage; anything else shows an inline error with an icon (never colour alone) and announces it assertively (3.3.1, 3.3.3, 4.1.3). It validates on submit, not on every key press, and nothing is clamped silently. Paste is allowed. The enterkeyhint of the touch keyboard is "go". Consumer duties: translated label, total and error text; going to the page (and announcing it, see Pagination) in onGoToPage. Use it only for lists with many pages.

import { JumpToPage } from "@nexera-ui/react";

Loading example…

6
examples: 19
props: 3
live controls: 1
platform: 10
WCAG criteria: 0
blocks use it

Try every prop. Copy the code.

Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.

Loading…

label

isDisabledfalse

isReadOnlyfalse

Generated code

import { JumpToPage } from "@nexera-ui/react";

<JumpToPage />

Examples 5

The same examples as Storybook, rendered live. Open Code to copy one.

Empty

Empty field. Enter with an empty field, or a page outside 1 to 120, shows the error and announces it.

Loading example…

app.tsx

import { JumpToPage } from "@nexera-ui/react";

<JumpToPage pageCount={120} defaultValue={Number.NaN} />;

Goes to the page

Wired to a page state, like next to a Pagination: Enter with a valid page goes there.

Loading example…

app.tsx

import { useState } from "react";
import { JumpToPage } from "@nexera-ui/react";

export function GoesToThePage() {
  function Demo() {
    const [page, setPage] = useState(1);
    return (
      <div className="flex flex-col gap-3">
        <JumpToPage pageCount={120} defaultValue={Number.NaN} onGoToPage={setPage} />
        <p className="m-0 text-body-default text-primary">Showing page {page}</p>
      </div>
    );
  }
  return <Demo />;
}

Disabled

Disabled: not focusable, dimmed text.

Loading example…

app.tsx

import { JumpToPage } from "@nexera-ui/react";

<JumpToPage pageCount={120} defaultValue={48} isDisabled />;

Narrow width

A 320 px column: label, field and total wrap onto further lines instead of overflowing; the error wraps too.

Loading example…

app.tsx

import { JumpToPage } from "@nexera-ui/react";

export function NarrowWidth() {
  return (
    <div className="max-w-xs">
      <JumpToPage
        pageCount={120}
        label="Gehe zu einer bestimmten Seite des Mitarbeiterverzeichnisses"
        totalLabel="von insgesamt 120 Seiten"
        errorMessage="Bitte eine ganze Zahl von 1 bis 120 eingeben, zum Beispiel 48."
        defaultValue={500}
      />
    </div>
  );
}

Right to left

Right to left: the label starts at the right and the digits are the locale's own.

Loading example…

app.tsx

import { JumpToPage } from "@nexera-ui/react";

export function RightToLeft() {
  return (
    <JumpToPage
      pageCount={120}
      defaultValue={48}
      label="انتقل إلى الصفحة"
      totalLabel="من ١٢٠"
      errorMessage="أدخل صفحة من ١ إلى ١٢٠"
    />
  );
}

Props 19

Press "Try it" on a card to load that prop into the playground.

pageCount*Nexera

number

Number of pages (the largest page the user can go to). Figma Total shows it as "of 120"; it also bounds the validation to the whole numbers 1 to pageCount.

labelNexera

string

Visible label and accessible name of the field. Translate it.

totalLabelNexera

string

Text after the field. Read as the field's description. Translate it and format the number for your locale.

errorMessageNexera

string | ((pageCount: number) => string)

Error text shown under the field, with an icon, when Enter is pressed with an empty field or a page outside 1 to pageCount; it is also announced. A function receives pageCount. Say what to enter. Translate it.

valueNexera

number

The typed page (controlled). NaN is an empty field. Use with onChange. React Aria commits the text on Enter and on blur, so onChange is not called on every key press.

defaultValueNexera

number

The page on first render (uncontrolled). NaN or omitted is an empty field.

onChangeNexera

(value: number) => void

Called with the committed number (NaN when the field is emptied).

onGoToPageNexera

(page: number) => void

Called with the page when Enter is pressed and the page is valid: a whole number from 1 to pageCount. Go to the page here.

inputRefNexera

Ref<HTMLInputElement>

Ref to the native <input> (the root ref points to the field wrapper), for example to return focus after navigating.

classNameNexera

string

Extra classes for the root, merged last so they win over the defaults.

styleNexera

CSSProperties

Inline style of the root.

commitBehaviorReact Aria

"validate" | "snap"

Controls the behavior of the number field when the user blurs the field after editing. 'snap' will clamp the value to the min/max values, and snap to the nearest step value. 'validate' will not clamp the value, and will validate that the value is within the min/max range and on a valid step.

isDisabledReact Aria

boolean

Whether the input is disabled.

isReadOnlyReact Aria

boolean

Whether the input can be selected but not changed by the user.

autoFocusReact Aria

boolean

Whether the element should receive focus on render.

idReact Aria

string

The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).

aria-describedbyReact Aria

string

Identifies the element (or elements) that describes the object.

nameReact Aria

string

The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).

formReact Aria

string

The <form> element to associate the input with. The value of this attribute must be the id of a <form> in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).

* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.

Accessible by default.

Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.

WCAG 2.2 evidence

7 direct · 3 supporting

1.3.1Info and RelationshipsLevel A · tested directly
1.4.10ReflowLevel AA · supporting test
1.4.12Text SpacingLevel AA · supporting test
2.1.1KeyboardLevel A · tested directly
2.4.7Focus VisibleLevel AA · supporting test
3.3.1Error IdentificationLevel A · tested directly
3.3.2Labels or InstructionsLevel A · tested directly
3.3.3Error SuggestionLevel AA · tested directly
4.1.2Name, Role, ValueLevel A · tested directly
4.1.3Status MessagesLevel AA · tested directly

Fits any width.

Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.

0 px · drag the corner

Styling hooks

Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.

data-disabled

Usage

<JumpToPage className="data-disabled:opacity-90 shadow-sm" />

Used in blocks

No block uses JumpToPage yet.

Theme studio

JumpToPage

Try every prop. Copy the code.

Examples 5

Empty

Goes to the page

Disabled

Narrow width

Right to left

Props 19

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components