Stepper

Stepper visually communicates a user’s progress through a linear process. It gives the user context about where they are, which steps have they completed, if any errors or warnings have occurred, and how many steps are left.

Also known as: Discrete progress indicator, Progress indicator, Progress stepper, Progress steps, Screen flow, Stepped tracker, Status tracker
View source code
Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected

Best practices

Improve accessibility by customizing the aria-label prop to provide additional context. For example:

Keyboard interactions

Keyboard interactions apply to only Steppers with steps with nested substeps. In those cases the parent step renders automatically a button that allows for expanding or collapsing the substeps.

KeyFunction
Tab
  • Moves the focus down to the next expand button.
  • By default all steps with substeps are collapsed, meaning only top level expand buttons will be focusable. Initially the top most step will be focused.
  • If the substeps contain more substeps, the focus will move to the inside steps only if the parent is expanded.
Shift + Tab
  • Moves the focus up to the previous expand button.
Enter / Space
  • Applicable to only steps with substeps. Those steps are in the collapsed state by default. Using this action on an the arrow button expands or collapses the step.