Stepper

Stepper communicates user progress through a linear process. It gives context about where they are, which steps are completed, how many steps are remaining, and whether errors or warnings have occurred.

Also known as: Discrete progress indicator, Progress indicator, Progress stepper, Progress steps, Screen flow, Stepped tracker, Status tracker
Salt package@salt-ds/core
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.