Anatomy
A stepper consists of step indicators with additional labels. The indicators are there to communicate the step number and specific state (see the States section). The label provides a brief description (if possible in one or two words) that describes the step. The stepper also includes navigation to go to a previous or next step in the flow.
- Step indicator and state
- Label with step description
- Divider
- Actions to navigate to a previous or next step
States
The indicators have individual states, depending on progress completion and the selected (active) step. It could be active or inactive and complete or incomplete. When all the required data is entered by the user, the indicator switches to a complete state.
Types
A stepper could have a horizontal or vertical layout.
Horizontal layout
Vertical layout
