Progress steps guide a user through a task with multiple sequential steps toward the completion of a linear process.
View a live version of this component and see how it can be customized.
Progress steps contain at least three step indicators. They are positioned on a thin horizontal or vertical line and organized sequentially from left to right or top to bottom.
Progress steps display circles or icons that indicate where a user is in the completion process. The appearance of these states change as a user moves through each step of the task.
- Finished step - A green circle with a check mark indicates a user has completed a previous step.
- Current step - A bright red circle with a pink border indicates a user is viewing or completing the current step.
- Error step - A dark red circle with an exclamation mark indicates there is an issue a user should be aware of.
- Next or Final step - A white circle with a light gray border indicates the next or final step has not been visited yet.
- Progress bar - A dark gray bar in between Finished and Current steps indicates how much progress a user has made.
Every step must have a text label indicating what a user has and will accomplish. Each text label should be written clearly and use ideally one word to avoid crowding. If two words need to be used, set them in Sentence case only.
The Horizontal orientation can be stretched or squeezed to fit different desktop or tablet layouts, it can also be used on mobile if there are fewer steps with short text labels.
The Vertical orientation can be used on desktop or tablet if the content within needs to be positioned on the right instead of underneath. It can also be used on mobile if the horizontal orientation has more steps or text labels with more words.
Progress steps are best used when displaying content that must be completed in a particular order.
If a task has fewer steps and short text labels, the horizontal orientation can be used on mobile. Otherwise, if a task has more steps and longer text labels, the vertical orientation should be used instead.
Steps are organized from left to right or top to bottom to demonstrate a user completing a task by moving through a linear multi-step process. A user should be able to return to any previously completed step in order to review data before finishing and submitting.
Error validation is a state that displays if there is an error that needs to be resolved first before a user can proceed. If a user tries to continue to the next step without inputting the required data, a Danger severity alert is displayed to inform them of what they should do.
At any time before a task is completed, a user is able to return to any previous steps. When all data in the final step is submitted, a user is not able to go back to review or change anything.
When a user navigates through steps, each step should present content relevant to the step text label. For example, if the current step text label states Choose trial, a user should be presented with the opportunity to choose a trial. Displaying relevant content and being clear about where a user is in the process will make them feel in control and encourage them to finish the task.
The interaction states within both orientations are the same.
When the Tab key is pressed repeatedly, the focus highlights each step icon and text label in order, from left to right in the horizontal component or from top to bottom in the vertical component.
|Tab||Moves the focus to the next step.|
|Shift + Tab||Moves the focus to the previous step.|
|Enter||Selects the step with focus.|
|Left arrow||Moves the focus and selects the previous step.|
|Right arrow||Moves the focus and selects the next step.|
|Home||Moves the focus and selects the first step.|
|End||Moves the focus and selects the current or final step.|
Progress steps mostly remain the same on large and small screens. When the horizontal orientation becomes crowded, it will switch to the vertical orientation.
Too many or too few steps
Do not use too many or too few steps, there should be between three and five steps visible.
Usage on mobile
Avoid using the horizontal orientation on mobile if there are too many steps present or if text labels are too long, switch to the vertical orientation instead.
Do not use the Error step icon for any previous steps, a user cannot proceed to the next step without resolving any errors first nor can they go back to resolve any errors and then continue.
Do not use Progress steps without text labels, color or icons alone cannot be used to represent step position or validation if a user is colorblind or uses assistive technologies like a screen reader.
Do not use Progress steps as an image carousel without including text labels and other types of content.
Do not use Progress steps as Tabs. Progress steps are used for guiding a user through a task by displaying sequential steps and instructional content.
Progress steps use PatternFly 4 spacers to define spacing values between elements.