Step Indicator

When to use the step indicator component

Multiple steps and screens

Use the step indicator when the user is working through a form or process that will span several different pages that can be organized into three or more high-level steps or chapters.

Linear progression

The step indicator is designed to complement standard back/next navigation in a linear sequence, not to be navigation of its own.

When to consider something else

Long forms with conditional logic

Consider another approach if the number of steps might change due to user input.

Nonlinear progression

The step indicator isn't appropriate for nonlinear forms or interactions that might be completed in any order.

Very short forms

Don't use a step indicator for short forms without chapters or sections. If a form or process has fewer than three sections, don't use a step indicator.

Usability guidance

Indicate where a user is in the process

Use a color and text treatment for the current step segment that is distinct from both the completed and pending step segments.

Use short or single-word labels

If labelling the step indicators, stick to very short words.

Provide navigation separately

Use navigation like a button group to step forward and backward through a form.

Place a heading directly below the step indicator

Each step needs an explicit heading. The step indicator segments are not sufficient as a heading for a page or screen.

Accessibility guidance

Use semantic heading levels

Though the default code uses an <h4>, use the correct heading level in your own implementation.

Use visually hidden text on labels

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

Indicate the current step

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