Skip to main content

Stepper

A visual indicator that guides users through a multi-step process, showing their current position, completed steps, and upcoming steps.

LabelHelper Text
2
LabelHelper Text
3
LabelHelper Text
import { Stepper } from "@/components/ui/stepper"

<Stepper
  currentStep={1}
  steps={[
    { label: "Label", helperText: "Helper Text" },
    { label: "Label", helperText: "Helper Text" },
    { label: "Label", helperText: "Helper Text" },
  ]}
/>

Examples​

All completed​

ConfirmReview details
SignApprove transaction
CompleteTransaction sent
<Stepper
  currentStep={3}
  steps={[
    { label: "Confirm", helperText: "Review details" },
    { label: "Sign", helperText: "Approve transaction" },
    { label: "Complete", helperText: "Transaction sent" },
  ]}
/>

First step active​

1
ConnectLink wallet
2
ApproveSet allowance
3
SwapExecute trade
<Stepper
  currentStep={0}
  steps={[
    { label: "Connect", helperText: "Link wallet" },
    { label: "Approve", helperText: "Set allowance" },
    { label: "Swap", helperText: "Execute trade" },
  ]}
/>

Without helper text​

Step 1
2
Step 2
3
Step 3
4
Step 4
<Stepper
  currentStep={1}
  steps={[
    { label: "Step 1" },
    { label: "Step 2" },
    { label: "Step 3" },
    { label: "Step 4" },
  ]}
/>

API Reference​

PropTypeDefaultDescription
stepsStep[]—Array of step objects with label and optional helperText
currentStepnumber—Zero-based index of the current active step. Steps before this are marked completed.

Step​

PropertyTypeRequiredDescription
labelstringYesThe label displayed below the step indicator
helperTextstringNoSecondary text displayed below the label

Accessibility​

  • Each step circle visually communicates state through color and iconography (checkmark for completed, filled for active, outlined for upcoming)
  • Step labels and helper text provide clear context for each stage of the process
  • Color is not the sole indicator of state — shape and icon differences reinforce status