Skip to main content

Stepper

Create a navigation bar to guide users through the steps of a specific task.

Stepper progresses users through a multi-step process. It helps make long tasks and processes appear more straightforward by dividing them into bite-sized chunks. Steppers come in two types: horizontal and vertical.

View in StorybookExternal link icon

Behavior​

  • The bar automatically scrolls to the current step and fits it into the viewport.
  • Steps and substeps are clickable.
  • Users can navigate between the started and finished steps.

Vertical​

  • When a step with substeps is selected, the component expands to fit the substeps. Substeps are displayed for the current step only.
  • If a step or substep is incomplete, an error icon appears to its right.
  • If the information entered in the current step affects previous steps, a warning icon appears to the right of those steps.

Horizontal​

  • Does not have substeps.
  • Consider using a Tooltip for steps that require additional context.
  • Validating the current step doesn't affect other steps.

Usage​

  • Use a vertical stepper for most tasks and processes.

  • Use a horizontal stepper for linear tasks and processes and when the vertical space is limited. Note that the horizontal variant doesn't support substeps.

Best practices​

  • When steps are optional, consider using Tabs.
  • Avoid separating steps from the content area (for instance, don't place steppers on a separate card or in a different app section).
  • For apps that implement Sidebar, consider including up to six steps in a horizontal stepper.
  • Consider using vertical steppers by default.

Accessibility​

Keyboard focus​

  • The keyboard focus state replicates the Step control's visual pressed state.

Keyboard interactions​

The stepper supports the common keyboard interactions, using the Tab key to select the element and using the Enter key to activate an in-focus element.

Resources​

Refer to Understanding 2.1.1 Keyboard for more information on expectations, intent, benefits, and techniques.