Anatomy
- Step label: Required text that states the current step position (e.g., "Step 1 of 6")
- Step progress bar: Visual indicator showing completion percentage within the current step (10% minimum, 90% maximum before advancing)
Usage Guidelines
When to use this component
- For processes that require multiple sequential steps where users need to understand their current position and overall progress.
- In multi-page forms or registration processes where users complete information across several screens.
- Onboarding flows, setup processes, or any task that benefits from showing clear progression milestones.
When not to use this component
- For processes that can be completed in one step or screen.
- When users can complete tasks in any order or when steps are not dependent on previous completion.
Best Practices
Limit Step Indicator to 8 or fewer steps to maintain clarity and prevent overwhelming users
Do not use it for processes that can be completed in one step
Use progress property to set the minimum progress of the current step at 10% to show visually the user's position
Do not allow progress bars to reach 100% until the user advances to the next step
Update progress dynamically based on user completion within each step
General Component Behaviors
Visual progress
The progress property sets the minimum progress of the current step at 10% to show visually the user's position. At this stage, no content has to be filled to reach that percentage.
Equally, the progress shown in each of the steps should max at 90%, reaching 100% only when the next button is clicked.
The rest of the progress should be dynamically changed based on how much of the step has been filled by the user.
Alignment
The Step Indicator supports two versions for the label to be aligned: block and inline. Use the inline version whenever the space is scarce, or if the content of each step changes the layout dramatically. Otherwise, favor a placement in context using a block alignment.
Placement
The Step Indicator is designed to be positioned at the top of its related content area, serving as a contextual header that immediately orients users to their current position before they engage with step-specific content. This placement ensures users always understand their progress context before interacting with form fields or step actions.
Known Gaps
- Additional accessibility score details and guidelines.
- Components improvements:
- Detailed breakpoint behaviors and mobile adaptations need documentation
- Behavior for allowing users to skip optional steps requires documentation