Steppers display progress through a sequence of logical and numbered steps. Use them for multi-step workflows like forms, onboarding flows, or checkout processes where users need to see their position and the steps ahead. Rendered as an ordered list (not a navigation landmark).
ts
| Guidance | Practices |
|---|---|
| Do | Keep step labels short and descriptive: "Payment" not "Enter your payment information". |
| Do | Use the vertical orientation for narrow containers or when steps have longer descriptions. |
| Do | Provide onStepClick for non-linear workflows where users may need to revisit earlier steps. |
| Do | Use status only to apply a semantic color (accent/success/warning/error); pass a custom icon for richer indicators. |
| Don't | Use a stepper for fewer than 3 steps; a simple heading or progress bar works better. |
| Don't | Use more than 7 steps; consider grouping related steps or using a different pattern. |