ComponentsStepper

displaytexulinot agent-emittableapp

Stepper

stepper

Horizontal or vertical progress through ordered steps.

Live examples

Checkout steps

Checkout steps

Loading demo…

Props

Public props for Stepper
NameKindRequiredDefaultDescription
stepsarrayyes—Array of { id, label, description? }
currentnumberyes—0-based active index
completedarrayno—Ids of completed steps
orientationenum (horizontal, vertical)no"horizontal"—
onStepClickeventno——
labelstringno"Progress"—
classstringno——

Keyboard

Keyboard behavior for Stepper
KeyAction
—See accessibility notes for keyboard behavior.

Accessibility

  • nav with an accessible name; current step is announced; completed steps may be activatable.

Evidence for stepper

Latest committed gates for stepper (as of 2026-10-23). Static snapshot — not live CI.

Behavior

n/ano behavior scenario

No dedicated behavior scenario for this catalog id (a styled or display surface, covered by its unit and axe tests).

Size (gzip)

texuli/stepper · budget 12.0 KiB

Budget from texuli.budgets.json; re-measure with `pnpm size --filter <entry>`.

Axe

documented

  • tests/e2e/site-component-pages.spec.ts
  • docs/quality (a11y-*)

Site component pages axe gate; package-level a11y docs under docs/quality when present.

Browsers

  • chromium
  • webkit
  • mobile

Playwright projects: Desktop Chrome, Desktop Safari, Pixel 7. Firefox is a known gap on this host.

When to use

Use when

  • Show multi-step onboarding or checkout progress

Don’t use when

Prefer another component

  • A chronological event log (use timeline)