फ़ीचर्ड
पेजिनेशनNumbered Pagination
A numbered page strip that collapses long runs to an ellipsis.
#pagination#links#ellipsis
6 फ्रेमवर्कमध्यम
Loading…
A number field that jumps straight to a typed page, with prev/next either side.
<nav aria-label="Pagination" class="flex flex-wrap items-center justify-center gap-2">
<a href="?page=2" rel="prev" class="inline-flex h-10 items-center rounded-lg border border-gray-300 px-3 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">Previous</a>
<form class="flex items-center gap-2" action="" method="get">
<label for="jump-page" class="text-sm text-gray-600 dark:text-gray-400">Page</label>
<input id="jump-page" name="page" type="number" inputmode="numeric" min="1" max="24" value="3" class="h-10 w-16 rounded-lg border border-gray-300 bg-transparent px-2 text-center text-sm tabular-nums text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:border-gray-700 dark:text-gray-100 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900" />
<span class="text-sm tabular-nums text-gray-600 dark:text-gray-400">of 24</span>
<button type="submit" class="inline-flex h-10 items-center rounded-lg bg-blue-600 px-3 text-sm font-semibold text-white transition-colors hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">Go</button>
</form>
<a href="?page=4" rel="next" class="inline-flex h-10 items-center rounded-lg border border-gray-300 px-3 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">Next</a>
</nav>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
currentPageआवश्यक | number | - | सक्रिय पृष्ठ संख्या, 1 से शुरू। |
totalPagesआवश्यक | number | - | कुल कितने पृष्ठ हैं। |
onPageChangeआवश्यक | (page: number) => void | - | On page change |
ariaLabel | string | 'Pagination' | बटन का एक्सेसिबल नाम। सिर्फ़ आइकन वाले बटन के लिए ज़रूरी है। |
className | string | - | रूट एलिमेंट पर मर्ज होने वाली अतिरिक्त क्लासेज़। |
For long lists where stepping one page at a time is tedious. The field is clamped to `[1, totalPages]` on submit rather than trusting the input, because `min`/`max` on a number input is advisory and a hand-typed 999 must still be caught. It is the one interactive entry in the set - `use client` is required because the typed value lives in React state - so wire `onPageChange` to your router. The row wraps under 320px so the field never pushes the arrows off-screen.