Use progress steps to:
- Show progress through a multi-step form or process
- Help users understand how many steps remain in a flow
- Provide context about the current stage in a sequential process
Do not use progress steps:
- For non-linear processes without a precise sequence, use a progress circle instead
- For processes with an unknown number of steps
- For single-step processes, no indicator is needed
- When steps can be completed in any order, consider alternative navigation
Progress steps vs other progress indicators
|
Use progress steps for |
Use a progress bar for |
Use a progress circle for |
Use a spinner for |
|---|---|---|---|
|
Multi-step sequential flows |
File uploads, downloads with known completion |
Single goal or target metrics |
Indeterminate loading processes |
|
Forms with clear stages |
Linear processes with value displayed as a percentage |
Non-linear achievement tracking |
Unknown duration tasks |
|
Wizard-style interfaces |
Time-based progress |
Profile completion, savings goals |
Initial page load |
Placement
The progress steps component should sit at the top of the flow, between the breadcrumb and the page title.
This prominent positioning clearly indicates the stage of the flow to users.
Steps 1-5 variant
If there are fewer than five steps in the process, use the Progress Steps 1-5 component. These components make use of the additional space to include supporting labels.
Key features:
- Each step includes a visible label
- Each step has a clickable hit state, so the user can manually move through the flow
- Labels should be concise and related to the page title
- Users can navigate backwards to completed steps
Label guidelines:
- Keep each label concise, one to three words
- Long labels should wrap to a new line
- Use clear, descriptive labels that relate to the page content
- Maintain consistent terminology throughout the flow
- Use sentence case for labels
Progress steps with five steps
Steps 6 or more variant
When there are more than five steps, the display is simplified, with each step represented as a small dashed line. Supporting labels are removed.
Key features:
- Each step is represented by a simplified indicator (dash or dot)
- No individual labels — typically, one overall label indicates the process
- Steps are more condensed to fit within the available space
- Users cannot click on individual steps to navigate through the flow
- An additional button group is required in the flow to account for navigation
Navigation
The correct button group must be used in the flow to allow users to move forward and back in the journey.
This should be consistently used in using both page step components. Next may not always be able to move a user through a journey until the current page requirements are completed.
Next and back button group