Stepper
Steps of a sequential flow: done, current and upcoming.
- 2Schedule
- 3Details
- 4Confirm
Vertical
- ProfileReviewed by SmartMCU
- Schedule
- 3Catalog
- 4Staff
Usage
import { Stepper } from '@smartui/react';
import '@smartui/react/styles.css';When to use
- Flows with three to five steps.
When not to use
- Sections that can be opened in any order. Use Tabs.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
steps | { key, label, description? }[] | required | |
currentStep | number | required | |
orientation | 'horizontal' | 'vertical' | 'horizontal' | |
onStepPress | (index) => void | - | Only completed steps can be pressed. |
Accessibility
- The current step is marked. Status uses a check mark and a number, not only color.