Skip to main content

Stepper

Horizontal step indicator for wizards and multi-step flows.

Checkout flow

  1. Account (completed)
  2. Details (current)
  3. Review
  4. Done

Pulsing current step

  1. Account (completed)
  2. Details (current)
  3. Review
  4. Done

With icons (pulsing current)

  1. Profile (completed)
  2. Verify (current)
  3. Billing

First step current

  1. Start (current)
  2. Configure
  3. Finish

All complete

  1. Draft (completed)
  2. Review (completed)
  3. Publish (completed)

API

PropRequiredTypeDefaultDescription
themeOptionalSiteThemeatelierVisual theme.
stepsOptionalStepperStep[]—id, label, status, optional icon (non-complete steps)
pulseCurrentOptionalbooleanfalseSoft pulse on the current step circle (respects reduced motion).
ariaLabelOptionalstringProgressAccessible name for the list.