Page number input

Let users type the page they want in the toolbar instead of clicking through a long document.

Basics

pageInput turns the page label into an editable field followed by the page count.

import { PdfViewer } from '@kingtech/react-pdf-viewer'; export default function Demo() { return <PdfViewer source="/samples/multipage.pdf" pageInput />; }

Enter or leaving the field goes to the page; Esc reverts to the current page. Numbers outside the document are clamped to the first or last page. The field is sized to the number of digits in the page count, and on narrow toolbars it stays visible while other actions move into the More actions menu.

Customization

The field’s background and border are CSS variables, and its accessible name is labels.pageInput.

import { PdfViewer } from '@kingtech/react-pdf-viewer'; import type { CSSProperties } from 'react'; const style = { '--rpv-toolbar-bg': '#f1f5f9', '--rpv-toolbar-fg': '#0f172a', '--rpv-button-hover-bg': 'rgba(15, 23, 42, 0.08)', '--rpv-button-disabled-fg': 'rgba(15, 23, 42, 0.35)', '--rpv-focus-ring': '2px solid #0f172a', '--rpv-page-input-bg': '#ffffff', '--rpv-page-input-border': '#94a3b8', } as CSSProperties; export default function Demo() { return ( <PdfViewer source="/samples/multipage.pdf" pageInput labels={{ pageInput: 'Go to page' }} style={style} /> ); }

See --rpv-page-input-bg and --rpv-page-input-border in the CSS variables reference and the customization guide.

Advanced / escape hatch

PdfToolbar accepts a pageIndicator node, so a custom toolbar can put any control, such as a page select, in the same place.

Limitations

Numeric pages only. Page labels defined inside the PDF (such as “iv” or “A-1”) are not shown or accepted. Workaround: map your own labels to page numbers and drive page from a custom control.

API

PdfViewerProps — Props for PdfViewer. Every piece of state supports the value / defaultValue / onChange trio.