Stepper

Copy for LLM

The Stepper component is used to display a series of steps in a process, allowing users to navigate through them. It is similar to a progress bar, but with distinct steps that can be navigated to directly.

Import

import { Stepper } from "@cfa/react-core";

Live Editor

Guidelines

When to use

Stepper is for a linear multi-step flow, such as onboarding, setup, or a multi-step form, so people can see where they are and what remains.

Do

Default to a horizontal layout when horizontal space allows. Use a vertical layout in modals, sidebars, or when steps need descriptions beside each indicator.
Keep the full step path visible.
Keep step labels short to avoid truncation or wrapping.
Announce step changes with an aria-live region when the active step updates.

Avoid

Using Stepper when people can freely jump between any step without linear progression. Use Tabs.
Using Stepper for continuous or percentage-based task progress. Use ProgressBar.

Examples

Controlled

The primary case may be the use with buttons to navigate between steps, but it can also be used with other components and API calls to change the active step.

We also expose a useStepState hook that can control the state for you, as well as provide useful utilities.

Here is an example of a controlled Stepper with buttons to navigate between steps:

Orientation

The Stepper can be "horizontal" (default) or "vertical", set with the orientation prop.

Content

The Stepper can be used to display content for each step. This is useful for multi-step forms or processes where each step has its own content.

There are many different ways you could accomplish this, but one way is to add custom properties into the useStepState hook.

Here is an example of a Stepper with content for each step:

Children

The Stepper.Step component can also accept children, however it is important to note that both children and content props should not be used simultaneously and if they are then the content will take precedence.