A stepper displays progress through a numbered sequence of steps, guiding people through a multi-step process.
Figma
The Figma reference for Stepper will appear here once the design link is added.
Storybook
Interactive examples for Stepper will render here once the Storybook link is wired in.
Best practices
- Use it for a linear process broken into a clear sequence of steps.
- Label each step concisely and indicate which is complete, current, and upcoming.
- For non-linear flows, let people move between steps that don’t depend on each other.
- Keep the number of steps manageable; combine trivial steps where possible.
Do’s and don’ts
Do
Break a long task into a few clearly labeled, ordered steps.
Don’t
Use a stepper for a single-screen task that doesn’t have real stages.
Accessibility
- Convey the current step and each step’s state (complete, current, upcoming) to assistive technology, not with color alone.