ProgressIndicator
React stepper for multi-step flows with completed, current, and upcoming states, horizontal and vertical layouts, and a dot appearance. Marks the current step for screen readers.
Each Step declares its state: completed, current, or upcoming. Switch layout with orientation and the marker style with appearance.
When to use
Use ProgressIndicator for flows with a fixed number of steps, such as a permit application with personal data, documents, review, and payment. Show it on every step so users know where they are and how much is left.
Use the vertical layout when steps have descriptions. For a percentage, use Progress.
Examples
Props
Props declared by ProgressIndicator. Native attributes of the underlying element pass through.
<ProgressIndicator>
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "vertical" | "horizontal" | ||
appearance | "dot" | "circles" |
<Step>
| Prop | Type | Default | Description |
|---|---|---|---|
state | "current" | "completed" | "upcoming" |
<StepIndicator>
| Prop | Type | Default | Description |
|---|---|---|---|
step | string | number | The 1-based step number to render. Shown for current and upcoming
steps, and for completed steps in the dot appearance. Ignored for a
completed step in the circles appearance - it shows a check instead. |
Accessibility
The steps render as an ordered list, and the current step carries aria-current="step". Completed and upcoming states are described in text, not only by color or icon.
Keep step titles short and unique so they read well in the list.