When to use it

Use Stepper when the visitor is moving through a known sequence and needs orientation inside that flow. It fits checkout, onboarding, and multi-step forms where the next stage is predictable.

If the visitor can jump freely between panels without a real sequence, Tabs is usually the clearer pattern.

Slot strategy

Stepper is a parent-led composition with five pieces:

• Stepper controls the active step and orientation.
• StepperItem wraps each stage in the sequence.
• StepperTitle gives each stage a short label.
• StepperDescription adds supporting detail when the labels need context.
• StepperSeparator draws the connector between items.

Keep step titles short so the current position stays easy to scan.

Behavior and theming guidance

Use activeStep to reflect the current stage from your real flow state. Do not hard-code it in a way that can drift from the route or form logic.

Horizontal orientation works best for short labels and a small number of steps. Switch to vertical when descriptions matter or when the sequence needs more breathing room on narrower layouts.