How to build an accessible Steps in React

Rendered as an ordered list (<ol>) with aria-label; the active item carries aria-current="step" to communicate progress to screen readers

When to use a Steps

• Checkout flows where the user moves through a fixed sequence of screens
• Onboarding wizards with a known number of steps
• Multi-step forms where showing overall progress reduces abandonment

When not to use it

• General section navigation — use Tabs instead
• Simple back/next controls without step labels — use Pagination instead
• More than 7 steps where the connector lines become unreadable on mobile

Accessibility

Role list, verified at WCAG 2.2-AA.

Common mistakes

Avoid: Using Steps as a replacement for Tabs for non-sequential navigation

Prefer: <Tabs> for switching between independent views

Steps imply a linear sequence and derive complete/pending state from position

Example

<Steps
  steps={[
    { label: 'Cart' },
    { label: 'Shipping' },
    { label: 'Payment' },
    { label: 'Confirm' },
  ]}
  activeStep={1}
/>

See the full Steps reference →