Skip to main content
Browse docs

Marwes documentation

Pagination

Finite page navigation with shared item-window generation, ellipsis rendering, current-page semantics, and React/Vue/Svelte adapters.

What this family solves

Finite page navigation with shared item-window generation, ellipsis rendering, current-page semantics, and React/Vue/Svelte adapters.

Use when

  • A finite collection is split across known pages.
  • Users need direct page jumps in addition to previous and next controls.
  • The interface should show a compact page range with ellipses.

Avoid when

  • Content loads continuously — use infinite scroll or load more.
  • Pages represent steps in a task flow — use a step navigator.
  • The selection controls visible panel content — use tabs.

Public imports

Choose an adapter in the verified examples. The inventory below reflects each framework package exactly.

React — @marwes-ui/react

Component

PaginationField

Type

PaginationFieldProps

Vue — @marwes-ui/vue

Component

PaginationField

Type

PaginationFieldProps

Svelte — @marwes-ui/svelte

Component

PaginationField

Type

PaginationFieldProps

Verified minimal examples

These examples come from the same fixtures verified by the repository checks.

React

import { PaginationField } from "@marwes-ui/react"
import { useState } from "react"

export function Example() {
  const [page, setPage] = useState(1)

  return (
    <PaginationField
      label="Search results"
      pagination={{
        page,
        pageCount: 10,
        controlDisplay: "label",
        maxVisibleItems: 5,
        onPageChange: setPage,
      }}
    />
  )
}

Vue

<script setup lang="ts">
import { PaginationField } from "@marwes-ui/vue"
</script>

<template>
  <PaginationField
    label="Search results"
    :pagination="{
      defaultPage: 1,
      pageCount: 10,
      controlDisplay: 'label',
      maxVisibleItems: 5,
    }"
  />
</template>

Svelte

<script lang="ts">
  import { PaginationField } from "@marwes-ui/svelte"

  let page = $state(1)
</script>

<PaginationField
  label="Search results"
  pagination={{
    page,
    pageCount: 10,
    controlDisplay: "label",
    maxVisibleItems: 5,
    onpagechange: (value) => (page = value),
  }}
/>

Accessibility requirements

  • Visible current page: Keep the current page state visible and announced, not just implied by visual emphasis.
  • Keyboard page access: Verify keyboard access to previous, next, and direct page controls without a pointer.
  • Connected field wiring: Use the public Field component so labels, helper text, errors, and invalid state stay connected.
  • Manual review boundary: Assistive-technology announcement of page changes in consuming product contexts.
  • Manual review 2: Keyboard focus order with surrounding data table controls.
  • Manual review 3: High-contrast appearance of selected and focused page items.

Theming

Pagination uses Marwes preset CSS and theme variables. Customize it through the theme passed to MarwesProvider; do not add a second component stylesheet. See the theming guide for configuration and token details.

Resources