Progress steps

Progress steps guide a user through a task with multiple sequential steps toward the completion of a linear process.

Progress steps component sample

View a live version of this component and see how it can be customized.

Customize component via PatternFly Elements

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 component blueprint

Visual elements

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.
Progress steps component visual elements

Text labels

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.

Helpful tip
Always try to write text labels as short as possible. If there are more than three steps, reduce the amount of characters.

Progress steps component text labels

Horizontal

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.

Warning
Do not write text labels with more than two words as space can become crowded when breakpoints get smaller or when text is translated.

Progress steps component horizontal orientation

Vertical

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.

Warning
Do not write text labels with more than two words as space can become crowded when breakpoints get smaller or when text is translated.

Progress steps component vertical orientation

Progress steps are best used when displaying content that must be completed in a particular order.

Mobile

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.

Warning
Do not use more than four steps because the layout will become crowded and a user might feel overwhelmed by the number of steps.

Progress steps component mobile usage

Progression

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.

Helpful tip
If a user needs to return to a previously completed step, they should be able to unless the task is complete.

Progress steps component progression, part 1
Progress steps component progression, part 2

Error validation

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.

Progress steps component validation

Completion

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.

Helpful tip
When a user reaches the Finished state, they cannot go back to any previous steps without starting the task all over again.

Progress steps component completion

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.

Progress steps component behavior

The interaction states within both orientations are the same.

Link

Progress steps component interaction state, link

Hover

Progress steps component interaction state, hover

Focus

Progress steps component interaction state, focus

Active

Progress steps component interaction state, active

Tab order

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.

Progress steps component tab order
Key Action
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.

Desktop

Progress steps component responsive design, desktop

Tablet

Progress steps component responsive design, tablet

Mobile

Progress steps component responsive design, mobile

Too many or too few steps

Do not use too many or too few steps, there should be between three and five steps visible.

Progress steps component best practice 1

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.

Progress steps component best practice 2

Validation

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.

Progress steps component best practice 3

Text labels

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.

Progress steps component best practice 4

Carousel

Do not use Progress steps as an image carousel without including text labels and other types of content.

Progress steps component best practice 5

Tabs

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 component best practice 6

Progress steps use PatternFly 4 spacers to define spacing values between elements.

Progress steps component spacing

To give feedback about anything on this page or to request a new Component, contact us.

To learn more about how to use foundational elements, visit the Foundations section.