Stepper
Show progress through a short sequential flow.
Progress
Use Stepper as a read-only indicator for a short sequential flow. The active step expands into a pill while completed steps remain visible.
Step 1 of 3: Details
Details · 1 of 3
Step count
The indicator stays compact across different flow lengths.
Step 1 of 3
Step 3 of 5
Step 7 of 7
Ghost
Use the ghost variant when the surrounding layout already provides enough structure, such as a dialog footer. The rounded track and padding stay; only the neutral fill is removed.
Step 2 of 3: Configuration
Best practices
When to use
- Use as a read-only indication of progress through a short, ordered flow.
- Use Tabs for peer views and a progress bar or Gauge for measured completion.
Behavior
- Keep the number of steps small and show clear back and continue actions near the content they control.
- Pass onValueChange when the stepper itself should move the flow. Arrow keys, Home, and End move between steps.