Stepper

A linear progress indicator for multi-step flows — markers connected by a line that fills in as steps complete. This renders the indicator (and, with showControls, Back/Next buttons that drive it) only; which content shows for the active step is your own step/onStepChange-driven render, the same split of responsibility as Pagination and whatever list it pages through.

<Stepper defaultStep={1} showControls />

Examples

Uncontrolled, starting on the first step — clicking a marker only ever jumps to an already-visited step, never ahead of where you've reached:

<Stepper
  steps={[
    { label: "Account", description: "Create your login" },
    { label: "Profile", description: "Tell us about you" },
    { label: "Confirm", description: "Review and finish" },
  ]}
/>

showControls adds Back/Next buttons wired to the same step state — Next becomes Finish on the last step:

<Stepper
  showControls
  defaultStep={1}
  steps={[
    { label: "Cart" },
    { label: "Shipping" },
    { label: "Payment" },
  ]}
/>

orientation="vertical" stacks steps down the page instead — a better fit for a sidebar than a form header:

<Stepper
  orientation="vertical"
  defaultStep={1}
  steps={[
    { label: "Cart" },
    { label: "Shipping" },
    { label: "Payment" },
  ]}
/>

Props