Skip to content
← Inventory

Stepper

Root stepper component that manages step state

Usage

import { Stepper, StepperItem, StepperItemProps, StepperProps, StepperSize } from "@desk/ui/components/stepper";

Best practices

  • Give each step a StepperItem child in order — progress is derived from child index, so conditionally rendering steps shifts the fill.

  • Control completion via value/onValueChange (or uncontrolled defaultValue); the fill reaches only the last *completed* step, not the current one.

Props

Stepper

PropTypeDefaultDescription
valuenumber

Current completed step index (controlled)

defaultValuenumber | (number & readonly string[])0

Initial step index (uncontrolled)

onValueChange(value: number) => void

Callback when step changes

sizeResponsiveStepperSize"base"

Size variant — a single token or a per-breakpoint object like { base: "sm", md: "lg" }.

classNamestring

Additional className

children(required)React.ReactNode

StepperItem children

StepperItem

PropTypeDefaultDescription
value(required)number

Step index (required, determines order and completion)

labelstring

Label text below the step (optional)

disabledboolean

Whether this step is disabled

iconLucideIcon

Custom icon - defaults to Check

classNamestring

Additional className

Also exports

  • typeStepperItemProps
  • typeStepperProps
  • typeStepperSize

Composition

Builds on

Icon