Overview
The Steps component provides a visual representation of progress through a sequence of connected stages or tasks, helping users understand where they are in a multi-step process.
Usage
Use to display progress through a multi-step process or workflow
Show the current step and total number of steps
Allow navigation between completed steps
Provide visual confirmation of completed steps
Anatomy
Step indicators: Visual representations of each step
Step labels: Text describing each step
Current step indicator: Visual highlight of the active step
Connector lines: Visual connections between steps
Progress indicators: Visual representation of completed steps
Variants & Props
Horizontal vs. vertical orientation
Numbered vs. icon-based steps
Accessibility
General
Where the user is at in the process and how many steps there are is communicated to screen readers.
Use of Color
Steps use more than color to indicate the status of each step.
Responsiveness
By default the component will wrap when there's not enough space. But we recommend using to the condensed version of the steps component when the content doesn't fit in one line at the breakpoint. More responsiveness guidelines here.
Keyboard Navigation
[Tab] to navigate into the listbox.
Focus on the first selectable step.
If a step item is selected, focus on that one.
If you tab in, out, and in again, retain focus on the last item that was focused.
[↑/↓] or [←/→] choose previous/next step depending on the layout.
[Enter] or [space] to select steps.
[Tab] focuses on the next component.
When focused on steps with tooltips, the tooltip is shown.