Stepper

Guidelines React

Github Storybook Markdown 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

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.

Color

The color prop can be used to change the color of the Stepper. The default is "primary", but it can also be set to "secondary".

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.

Props

Visit the Documentation Site for the full list of props.

Stepper.Root

Name	Type	Default	Description
children	React.ReactNode	-	The content of the Stepper (or the StepperStep).
className	string	-	CSS class names to apply custom styling.
color	"primary" | "secondary"	primary	The background color of the Stepper.
id	string	-	The unique identifier for the DOM element.
orientation	"horizontal" | "vertical"	horizontal	The orientation of the Stepper.
role	AriaRole	-	The ARIA role assigned to the element to improve accessibility. Example roles include "button", "navigation", "dialog", etc.
style	CSSProperties	-	Inline styles specified as a React-compatible CSS properties object.

Stepper.Step