Step flow wizard

ECT approvedUpdated May 21, 2026

Description

A step flow wizard represents an end-to-end journey that a user can complete in one go.
It has a specific start and end point.
It shows the current step and the total number of steps in the journey.
Use a step flow to help users complete tasks in a specific order based on user needs.
Use a step flow for a process or form that has 3 to 8 steps.
Include a summary as the last step of the flow. See an example of a wizard summary.

Warning

Choosing the right component 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 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 long-running or non-linear work that can span pages or sessions, use Progress tracker. For example, onboarding or setup flows

Anatomy

Anatomy

Status

In the step flow, each progress indicator uses a clolor to show the status of the step.

Green shows the step is completed.
Black shows the step is in progress.
White shows the step is not completed.

Default

Layout

Page layout

Sidebar

Dialog: modal

Dialog full screen

Examples

Wizard summary example (final step)

Dialog example

Sidebar example

Best practices

Use a step flow for a complex task with a maximum of 8 fixed steps.
Include a Previous step button in the footer so the user can return to a previous step to review their data.
Include a Next step button in the footer.
The final step should be a summary of the completed steps.
Make the summary editable, unless there's a technical reason not to.

Dos and don'ts

Technical example

Step Flow component implemented in Carbon.

How it works

A step flow shows the number of steps in a process. Make sure users who cannot see the step flow can understand where they are in the overall progress of the process.

Accessibility requirements

Hidden Labels

Use visually hidden text make the completion status of each step explicit.

Color

Use color and an additional indicator to show completed steps. The example below uses the color green and a tick mark.

ARIA

Warning

Use ARIA with caution.

When using labeled segments, use aria-current="true" on the list item representing the current step.

Testing

We tested the component using the following software.

Computer

Operating System	Version
MacOS Ventura	13.2
---	---
Safari	17.0
Chrome	105.0.5195.102

Assistive technology

Type	Name
Screen reader	VoiceOver (Mac)
Screen reader	NVDA (Windows)
Speech recognition	Voice Control (Mac)

Resources

Date	Changes
March 2026	Moved the Back to previous step from a link above to a button in the footer.
May 2025	Added a Don't regarding not using a step sequence within a wizard.
May 2024	Updated visual hierarchy of elements. Main goal is now styled like a H1 and step subtitle is styled like a H2.Updated in progress visual indicator to a black half fill as opposed to a 100% fill.
November 2023	Update the Aria label guidance.
September 2023	Renamed the previous step flow to step sequence.Created new step flow component.

Description

A step flow represents an end-to-end journey that a user can complete in one go.
It has a specific start and end point.
It shows the current step and the total number of steps in the journey.
Use a step flow to help users complete tasks in a specific order based on user needs.
Use a step flow for a process or form that has 3 to 6 steps.

Figma library

Anatomy

Anatomy

States

A step flow has no states and is not interactive. The progress indicator steps have states.

The colour of the progress indicator segments show progress.

The green segment shows the step is completed.
The half filled black segment shows the step is in progress.
The light grey segment shows the step is not completed.

State

Layout

Desktop and mobile

Variations

Default

All elements

Best practices

Use a step flow for a complex task with a maximum of 8 fixed steps.
Include a Back button in the footer so the user can return to a previous step to review their data.
Include a Continue button in the footer.
End the step flow with a confirmation message summarising the tasks. See the Summary list component.

Technical example

Step Flow component implemented in Carbon.