Components
VersionLoading…
Stepper
Labelled progress for persistent multi-step flows.
Stepper indicates where someone is in a multi-step flow. The host owns all entered values and validation; moving backward must not clear data.
<Stepper
steps={steps}
current={currentStep}
onStepClick={setCurrentStep}
/>Props
| Prop | Type | Default | Notes |
|---|---|---|---|
steps | { id, label, optional? }[] | — | Ordered, sentence-case decision labels |
current | number | — | Zero-indexed current step |
onStepClick | (index: number) => void | — | Omit for an indicator; supply it to navigate |
allowForward | boolean | false | Permits clicks beyond the current step |
orientation | horizontal | vertical | horizontal | Vertical is suited to a side rail |
variant | bar | numbered | bar | Use numbered for short flows |
At narrow widths, the horizontal presentation condenses to “Step n of total” and the current label while retaining the ordered-list semantics for assistive technology.