# Stepper

Source: https://design.ritchiebros.com/components/navigation/stepper/

A stepper displays progress through a numbered sequence of steps, guiding people through a multi-step process.

## Figma

The Figma reference for **Stepper** will appear here once the design link is added.

## Storybook

Interactive examples for **Stepper** will render here once the Storybook link is wired in.

## Best practices

- Use it for a linear process broken into a clear sequence of steps.
- Label each step concisely and indicate which is complete, current, and upcoming.
- For non-linear flows, let people move between steps that don’t depend on each other.
- Keep the number of steps manageable; combine trivial steps where possible.

## Do’s and don’ts

**Do:** Break a long task into a few clearly labeled, ordered steps.

**Don’t:** Use a stepper for a single-screen task that doesn’t have real stages.

## Accessibility

- Convey the current step and each step’s state (complete, current, upcoming) to assistive technology, not with color alone.

## Related components

- [Tabs](https://design.ritchiebros.com/components/navigation/tabs/)
- [Pagination](https://design.ritchiebros.com/components/navigation/pagination/)