Stepper
Step-by-step progress and timeline primitive.
Quick Preview
Apply
Submit buyer details.
2
Review
Approval team verifies documents.
3
Close
Sign and complete payment.
Composition
Use this public composition when building Stepper:
Stepper
├── StepperItem
│ ├── StepperIndicator
│ ├── StepperTitle
│ ├── StepperDescription
│ └── StepperMeta
└── StepperSeparatorUsage
<Stepper value={2}><StepperItem><StepperTitle>Apply</StepperTitle></StepperItem></Stepper>Examples
Default Stepper
Use this as the starting point for Stepper. Keep product data, routing, fetching, and authorization logic in the consuming app.
Apply
Submit buyer details.
2
Review
Approval team verifies documents.
3
Close
Sign and complete payment.
Props
| Prop/API | Type | Default | Description |
|---|---|---|---|
orientation | `"horizontal" | "vertical"` | "horizontal" |
value | number | - | 1-based active step. |
state on StepperItem | `"complete" | "active" | "upcoming"` |
className | string | - | Local layout or spacing overrides. |
| native/root props | React component props | - | Passed through to the underlying root or primitive. |
Accessibility
- Preserve the documented Stepper composition so labels, triggers, content, and controls remain connected.
- Provide visible labels or accessible names for interactive controls.
- Preserve the component-provided focus, keyboard, disabled, and invalid-state behavior.
- Do not communicate state with color alone; include text, icons, or helper copy.