Usage
import { Stepper, StepperItem, StepperItemProps, StepperProps, StepperSize } from "@desk/ui/components/stepper";Best practices
Give each step a
StepperItemchild in order — progress is derived from child index, so conditionally rendering steps shifts the fill.Control completion via
value/onValueChange(or uncontrolleddefaultValue); the fill reaches only the last *completed* step, not the current one.
Props
Stepper
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | Current completed step index (controlled) | |
| defaultValue | number | (number & readonly string[]) | 0 | Initial step index (uncontrolled) |
| onValueChange | (value: number) => void | Callback when step changes | |
| size | ResponsiveStepperSize | "base" | Size variant — a single token or a per-breakpoint object like
|
| className | string | Additional className | |
| children | React.ReactNode | StepperItem children |
StepperItem
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | Step index (required, determines order and completion) | |
| label | string | Label text below the step (optional) | |
| disabled | boolean | Whether this step is disabled | |
| icon | LucideIcon | Custom icon - defaults to Check | |
| className | string | Additional className |
Also exports
- type
StepperItemProps - type
StepperProps - type
StepperSize
Composition
Builds on