Navigation
Stepper
Show progress through a multi-stage task, marking completed, current and upcoming steps.
Purpose
Use a stepper when the order is fixed and the person needs to know how much is left. If the sections can be completed in any order, use Tabs.
Example
Details
Member and employer
- 2
Entitlements
Choose the plan
- 3
Dependants
Add family members
- 4
Review
Confirm and submit
Props
| Prop | Type | Default | Description |
|---|---|---|---|
stepsrequired | Step[] | — | Ordered list of steps to render, in sequence. |
currentrequired | number | — | Zero-based index of the current (in-progress) step. Earlier steps render as complete, later ones as upcoming. |
orientation | "horizontal" | "vertical" | undefined | "horizontal" | Layout direction of the sequence. |