Stepper
Progress through wizards and multi-step dialogs.
Example
A representative composition rendered with the published package API.
- Details, completed
- 2Scope, current step
- 3Review, upcoming
- Rates, completedInput and output prices
- 2Review, current stepCheck the immutable draft
- 3Publish, upcoming
Options
The decisions most consumers need to make when adopting this family.
orientationhorizontal (default) · vertical
Horizontal suits dialogs and short flows; on narrow screens only the current label stays visible. Use vertical for longer flows with descriptions.
currentStep0 … steps.length
Zero-based. Pass steps.length once every step is complete.
| Option | Values or anatomy | Guidance |
|---|---|---|
orientation | horizontal (default) · vertical | Horizontal suits dialogs and short flows; on narrow screens only the current label stays visible. Use vertical for longer flows with descriptions. |
currentStep | 0 … steps.length | Zero-based. Pass steps.length once every step is complete. |
Usage
Copy the package import and adapt the composition to product-owned content and state.
import { Stepper } from "@conscia-labs/design-system";