Step sequence

ECT approvedUpdated May 21, 2026

Step indicator

Description

A step sequence makes a linear process easier to complete by:

breaking it into smaller steps (3 to 5)
showing how many steps the user has completed and how many are left.

Warning

Choosing the right component For simple on-page checklists, use Step sequence. Shows what’s done and what’s left Ideal for 3 to 5 lightweight actions on a single screen For gating or step-by-step validation, use Step flow wizard. A guided, linear, end-to-end journey completed in one go Ideal for forms For long-running or non-linear work that can span pages or sessions, use Progress tracker. For example, onboarding or setup flows

Anatomy

Anatomy

Sizes

Step sequence is available in S and M sizes.

Color mode

Light

Dark

Variations

Orientation

Vertical

Examples

Sales invoice - web

Sales invoice – mobile

Best practices

Use a step sequence for a complex task with a fixed number of steps.
Keep step labels between one to two words.
Use content or a confirm indicator to show when the step sequence is completed.
There are no real breakpoints in place, so it is at designer's discretion which orientation to use.
Use a vertical step sequence for small screens or where horizontal space is limited.
Remove the step line and add the title of each step where space is limited.

Dos and don'ts

Labels

Labels should always be written in:

actionable language telling the use what they need to do in each step
the format {verb} {noun} whenever possible

Use case

Users should be able to:

Understand where they are in a process.
Identify which steps are completed, which are current, and which are yet to be completed.
Understand the descriptions of each step within a process.

Interactions

The step indicator is non-interactive and does not require user input.

Design considerations

The step indicator allows users to reference where they are within a step flow. It should be updated as the user completes each step.
Do not us color alone to differentiate between the steps.
Use labels and step descriptions to provide more clarity on what is expected in each step.

Development considerations

The steps should be wrapped in an ordered list ol with each step being wrapped in a list item li so that screen reader users know how many steps there are in the process.
Do not use ARIA attributes to relay step information to users, as the step indicator is non-interactive, and some ARIA attributes may not be allowed on generic elements.
Use visually hidden text instead.
A completed step should have ‘completed’ before the step description.
A current step should have ‘current’ before the step description.

Date	Changes
April 2026	Fixed all broken images.
February 2026	Added label guidance to the content tab.
August 2025	Updated guidance on the accessibility tab.
May 2025	Updated do's and don'ts guidelinesChanged term from 'Step indicator' to 'Step sequence'
28 February 2025	Updated guidelines and best practicesAdded usage examples
September 2024	New version created. Previous version archived in the frozen Product design system.