Show where a multi-stage flow stands
An ordered list of steps for wizards and other staged flows. Steps before the active one render complete with a check, the active step takes the primary action fill and aria-current, and later steps stay muted until the flow reaches them. Pass an onStepClick handler and completed steps become buttons, so a reader can revisit an earlier stage without losing their place.
Default
- Account
- Delivery
- Payment
- Review
With descriptions
- AccountSign in or continue as a guest
- DeliveryAddress and shipping speed
- PaymentCard or saved method
- ReviewConfirm and place the order
Vertical
- AccountSign in or continue as a guest
- DeliveryAddress and shipping speed
- PaymentCard or saved method
- ReviewConfirm and place the order
Progress states
- Account
- Delivery
- Payment
- Review
- Account
- Delivery
- Payment
- Review
In a wizard
- Payment
- Review