Steps

Visual progress indicator for multi-step flows with horizontal and vertical orientations

Category: navigation · WCAG 2.2-AA · steps, wizard, stepper, progress, navigation, onboarding, checkout

States

pending
active
complete
error

Props

Prop	Type	Default	Description
`label`	`string`	—	Alias of `ariaLabel` — the same invisible accessible name under the other spelling. Neither is deprecated.
`ariaLabel`	`string`	—	Accessible label for the steps navigation; defaults to the built-in i18n string.
`items`	`Step[]`	—	Alias of `steps` — the catalog-wide name for a config-driven collection. Exactly one of the two is required.
`steps`	`Step[]`	—	Array of step objects with label and optional explicit state
`activeStep`	`number`	`0`	Index of the currently active step (0-based)
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Axis the steps flow along: `horizontal` runs them across with connectors between, `vertical` stacks them down the page.
`className`	`string`	—	Additional CSS class names merged onto the root element.

Design tokens

--cascivo-color-accent
--cascivo-color-accent-content
--cascivo-color-success
--cascivo-color-success-content
--cascivo-color-error
--cascivo-color-error-content
--cascivo-color-surface
--cascivo-color-text
--cascivo-color-text-subtle
--cascivo-color-text-muted
--cascivo-border-default
--cascivo-radius-full
--cascivo-ease-out

When to use

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

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

How to build an accessible Steps in React →

Examples

Horizontal (default)

Standard checkout or onboarding progress tracker

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

Vertical

Sidebar-style progress for tall forms

<Steps
  orientation="vertical"
  steps={[
    { label: 'Account info' },
    { label: 'Profile details' },
    { label: 'Preferences' },
  ]}
  activeStep={0}
/>

With explicit error state

Override derived state on a specific step

<Steps
  steps={[
    { label: 'Upload' },
    { label: 'Validate', state: 'error' },
    { label: 'Process' },
  ]}
  activeStep={1}
/>

Related components

Pagination — Pagination is for paged data sets, Steps is for guided task sequences
Tabs — Tabs are for non-sequential section switching, not ordered task flows

← Back to docs