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 |
|---|
Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected
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
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.
- When nesting steps, the parent
Stepautomatically renders a newSteppercontaining 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
inprogressstate
- Nested steps are only supported in vertical orientation
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.