Stepper

Multi-step wizard for guiding users through a process. Displays progress and allows navigation between steps.

Storybook documentation (opens in new tab)

Account

Enter your account details

Email

React

  <Stepper>
    <Step label="Account">
      {/* add step content */}
    </Step>
    <Step label="Profile">
      {/* add step content */}
    </Step>
    <Step label="Confirmation">
      {/* add step content */}
    </Step>
  </Stepper>

Props

Show Labels

By default, only step numbers are shown. Use showLabels to display step names.

Account

Enter your account details

React

<Stepper showLabels>
  <Step label="Step 1">
    {/* add step content */}
  </Step>
  <Step label="Step 2">
    {/* add step content */}
  </Step>
</Stepper>

Accessibility

• Step list uses semantic <nav> with aria-label="Progress"
• Steps are in an ordered list (<ol>) with role="list"
• Active step has aria-current="step"
• Icons are decorative (aria-hidden="true")
• When labels are hidden, screen reader text is provided
• Step content has role="tabpanel" with aria-label
• Navigation buttons have descriptive aria-label attributes