Stepper
Guide users through a sequence of steps in a process.
Inline descriptions (responsive)
A stepper with per-step descriptions that adapt to width.
Responsive - switches to vertical layout
Horizontal with panel + submit
A horizontal stepper with content panels and a submit step.
Site
Enter the site name and address
Site content
Vertical with panel
A vertical stepper with content beneath each step.
Site
Enter the site name and address
Site content
API reference
A multi-step progress flow: a nav of items (trigger, indicator, separator, title, description) with switchable content panels.
Anatomy
Stepper | Root holding the steps, orientation, and navigation state. |
StepperItem | Wraps one step, deriving its active/completed state. |
StepperTrigger | Clickable tab that navigates to its step. |
StepperIndicator | Circular badge showing the step number, icon, or state. |
StepperSeparator | Connector line between steps; fills when completed. |
StepperTitle | Heading label for a step. |
StepperDescription | Muted secondary text for a step. |
StepperPanel | Container region for the active step's content. |
StepperContent | Content shown only when its value is the current step. |
StepperNav | Flex nav laying out the stepper items. |