Skip to content
Cimpress UI

Stepper API

Usage guidelinesAPI

Import

Section titled “Import”
import { UNSTABLE_Stepper, UNSTABLE_StepperItem } from '@cimpress-ui/react';

Usage notes

Section titled “Usage notes”

A Stepper consists of multiple StepperItem components, each representing a single step in the process. Place each StepperItem as a child of the Stepper.

By default, Stepper will automatically set the status of each StepperItem based on its index: steps before the current step (currentStep) are marked as complete, the current step as in-progress, and any remaining steps as incomplete. You can override this by providing a status prop directly to a step (e.g., complete, warning, or error).

To make the stepper interactive, provide an onChange handler to the Stepper. Make sure to update the currentStep prop when the onChange handler is called. Users can only select steps that precede the current step, or any step with an explicit status prop.

API reference

Section titled “API reference”

Stepper

Section titled “Stepper”

Displays a series of steps in a process.

ref
Section titled “ ref ”
Ref<HTMLDivElement>

The ref type for this component.

UNSTABLE_StepperProps
children *
Section titled “ children * ”
ReactNode

The steps to display in the stepper.

currentStep
Section titled “ currentStep ”
number

The index of the active step.

onChange
Section titled “ onChange ”
(step: number) => void

The callback to call when the current step changes.

orientation
Section titled “ orientation ”
'vertical' | 'horizontal'

The orientation of the stepper.

Defaults to 'horizontal' .
id
Section titled “ id ”
string

The element's unique identifier. See MDN.

data-cim-style-root
Section titled “ data-cim-style-root ”
boolean

Use this attribute to "claim" the component tree for exclusive Cimpress UI usage.

UNSAFE_className
Section titled “ UNSAFE_className ”
string

Sets the CSS className for the element. Only use as a last resort. Use style props instead.

See styling guide.

UNSAFE_style
Section titled “ UNSAFE_style ”
CSSProperties

Sets the CSS style for the element. Only use as a last resort. Use style props instead.

See styling guide.

StyleProps
margin
Section titled “ margin ”
Responsive<Spacing | "auto">

The amount of margin applied to all edges of this component.

marginX
Section titled “ marginX ”
Responsive<Spacing | "auto">

The amount of margin applied to the left and right edges of this component. Takes priority over margin.

marginY
Section titled “ marginY ”
Responsive<Spacing | "auto">

The amount of margin applied to the top and bottom edges of this component. Takes priority over margin.

marginTop
Section titled “ marginTop ”
Responsive<Spacing | "auto">

The amount of margin applied to the top edge of this component. Takes priority over marginY and margin.

marginRight
Section titled “ marginRight ”
Responsive<Spacing | "auto">

The amount of margin applied to the right edge of this component. Takes priority over marginX and margin.

marginBottom
Section titled “ marginBottom ”
Responsive<Spacing | "auto">

The amount of margin applied to the bottom edge of this component. Takes priority over marginY and margin.

marginLeft
Section titled “ marginLeft ”
Responsive<Spacing | "auto">

The amount of margin applied to the left edge of this component. Takes priority over marginX and margin.

StepperItem

Section titled “StepperItem”

Represents a single step in a stepper component.

UNSTABLE_StepperItemProps
children *
Section titled “ children * ”
StringLikeChildren

The title of the step.

description
Section titled “ description ”
ReactNode

The description of the step. Optionally, you can pass a React node to render rich text.

status
Section titled “ status ”
StepperStatus

The status of the step.

id
Section titled “ id ”
string

The element's unique identifier. See MDN.

data-cim-style-root
Section titled “ data-cim-style-root ”
boolean

Use this attribute to "claim" the component tree for exclusive Cimpress UI usage.

UNSAFE_className
Section titled “ UNSAFE_className ”
string

Sets the CSS className for the element. Only use as a last resort. Use style props instead.

See styling guide.

UNSAFE_style
Section titled “ UNSAFE_style ”
CSSProperties

Sets the CSS style for the element. Only use as a last resort. Use style props instead.

See styling guide.