Stepper Horizontal
Displays progress through a sequential multi-step process with a horizontal step indicator.
When to use
- When guiding users through a multi-step process with a clear beginning, middle, and end.
- When steps are sequential and must be completed in order.
- When users benefit from seeing their overall progress through the workflow.
When not to use
- Use diwa-tabs when content sections can be accessed in any order.
- Don't use a stepper for 2-step processes - a simple back/next button pattern is sufficient.
- Don't use more than 6 steps - consider splitting the workflow.
Dos and don'ts
Do
- ✓Use short, action-oriented labels for each step (e.g. "Account", "Details").
- ✓Show the active step prominently and completed steps as visually distinct.
- ✓Allow users to navigate back to review completed steps.
Don't
- ✕Don't use long step labels that truncate on smaller screens.
- ✕Don't skip step numbering - users need to know how far they are.
- ✕Don't block navigation to completed steps without reason.