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

Orientation

Horizontal (default)

Vertical

Stage + Status

The Step component's appearance depends on its stage and status props. When both are set, status takes precedence over stage. These props control:

  • Icon selection
  • Description text color
  • Track (connector) style

Nested Steps

The Stepper component supports nested steps when used in vertical orientation. You can nest Step components within other Step components to create hierarchical step structures.

Behavior

  • When nesting steps, the parent Step automatically renders a new Stepper containing its child steps
  • An expand/collapse button appears on parent steps to toggle visibility of nested steps
  • Parent steps containing the active child step are automatically set to inprogress state

Limitations

  • Nested steps are only supported in vertical orientation

Controlled Stepper

The Stepper and Step component are primarily presentational components. If you want to control the state of the Stepper you can use a custom hook.