Navigation
Stepper
A tracker for steps in a flow, such as a form wizard or checkout. Screen readers hear which step you are on.
ReactVueWeb Components
View in Storybook Playground
Examples
<Stepper active={1} steps={[{ label: 'カート' }, { label: '配送' }, { label: '確認' }]} />Props
| Name | Type | Default | Description |
|---|---|---|---|
steps required | StepItem[] | — | The steps in order. |
active | number | 0 | Index of the current step (drives derived statuses). @default 0 |
orientation | 'horizontal' | 'vertical' | horizontal | Layout direction. @default 'horizontal' |
completeLabel | string | completed | SR text appended for completed steps. @default 'completed' |
errorLabel | string | error | SR text appended for errored steps. @default 'error' |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.