NAVIGATION / COMPONENTS
Stepper
Explain progress through a workflow.
About stepper
Steppers visually represent advancement through a series of ordered and logical steps, serving as a navigation tool. Additionally, they can show a temporary feedback message upon the completion of each step.
01
Anatomy
Shared parts, named consistently.
- 1Status circleRequired
A circle that will indicate the status of the Step.
- 2TitleRequired
The title of the step
- 3Subtitle
The subtitle of the step.
- 4Action
A slot to place an action.
- 5BorderRequired
The border of each step.
- 6Content
The content of the step.
Try the default
A working example with the shared V1 visual language.
When to use
Use for a sequence with a clear beginning and end. Mark current and completed steps without relying on color alone.
When navigation is provided, each step button is keyboard operable. The current step uses aria-current.