Stepper
betaA multi-step wizard's progress — connectors fill, finished steps draw a check, and each step's content slides in from the side it comes from.
- Navigation
- 1 file
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add steppernpm packages installed: class-variance-authority.
import { Stepper } from "@/components/ui/stepper";Default
Gallery
Indicator Only
Right To Left
<Stepper>
| Prop | Type | Default |
|---|---|---|
steps (required) | StepperStep[] | — |
completedLabelAppended to a finished step's name for assistive technology. | string | "completed" |
defaultStepInitial step when uncontrolled. | number | 0 |
labelNames the list. | string | "Progress" |
navigationWhich steps can be chosen directly. - | "none" | "completed" | "all" | "none" |
onStepChange | (step: number) => void | — |
orientation | "horizontal" | "vertical" | "horizontal" |
stepControlled current step, zero-based. | number | — |
Plus every attribute of <div> except children.
An ordered list named "Progress", with aria-current="step" on the current step and finished steps named with a visually hidden "completed". Steps are plain list items unless `navigation` makes them choosable; then they are buttons sharing one tab stop, moved between with the arrow keys (mirrored in RTL, Up/Down when vertical), Home and End, and chosen with Enter or Space. The content area is a group labelled by the current step. Horizontal labels collapse to screen-reader-only text on narrow screens. All motion is CSS decoration and stops under reduced motion.
10/10
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — passes
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — passes
- No fixed widths — passes