New! Stepper is in beta, the API is subject to change. Feel free to test it out and let us know what you think! This component is available on thestable branch.

Stepper

guides users through the steps of a multi-step process, showing progress and the status of each step.

Props

children

Custom content to render for the active step.

node

<Box>...</Box>

clickableSteps

Whether steps can be clicked to navigate between them.

boolean

true

false

currentStep

The 'id' of the step that is currently active.

string

"a step id"

direction

The orientation of the Stepper.

string

"horizontal"

"vertical"

id

The DOM id attribute value to use for the underlying element.

string

"stepper-id"

onStepClick

Function that will be called with the clicked step's 'id' when 'clickableSteps' is true and a step is clicked.

function

() => {}

showDescription

Whether to show each step's 'description' beneath its title.

boolean

true

false

steps

The steps to display. 'id' uniquely identifies the step and is used to match against 'currentStep'. 'title' is the step label. 'description' is optional supporting text shown when 'showDescription' is true. 'status' indicates the state of the step. 'disabledReason' is shown when the step's status is "disabled". 'errorMessage' is shown when the step's status is "error". 'children' allows for an array of sub-steps nested under a step, following the same shape.

array


[
  {
    id: "string",
    title: "string",
    description: "string",
    status: "...",
    disabledReason: "string",
    errorMessage: "string",
    children: [
      {
        id: "string",
        title: "string",
        description: "string",
        status: "...",
        disabledReason: "string",
        errorMessage: "string",
      }
    ],
  }
]

where status could be:

"pending"

"completed"

"error"

"disabled"

Theme

stepper.completed.connector.color

The color of the line connecting to the next step.

string

A hex, name, or rgb value.

"brand"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

stepper.completed.indicator.background

The background of the step indicator.

string

A hex, name, or rgb value.

"background-front"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

stepper.completed.indicator.border

The border color of the step indicator.

string

A hex, name, or rgb value.

"brand"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

stepper.completed.indicator.color

The icon or text color of the step indicator.

string

A hex, name, or rgb value.

"brand"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

stepper.completed.indicator.hover.background

The background of the step indicator when hovered.

string

A hex, name, or rgb value.

"background-front"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

stepper.completed.indicator.icon

The icon shown in the step indicator.

element

<FormCheckmark />

stepper.completed.indicator.iconSize

The size of the icon shown in the step indicator.

string

"medium"

stepper.completed.indicator.substep.iconSize

The icon size used within a sub-step's indicator.

string

"small"

stepper.completed.label.color

The color of the step title.

string

A hex, name, or rgb value.

"text-weak"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

stepper.connector.stroke.width

The stroke width of the line connecting steps.

string

"2px"

stepper.current.indicator.background

The background of the step indicator.

string

A hex, name, or rgb value.

"brand"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

stepper.current.indicator.border

The border color of the step indicator.

string

A hex, name, or rgb value.

"brand"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

stepper.current.indicator.color

The icon or text color of the step indicator.

string

A hex, name, or rgb value.

"white"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

stepper.current.indicator.hover.color

The icon or text color of the step indicator when hovered.

string

A hex, name, or rgb value.

"white"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

stepper.current.indicator.icon

The icon shown in the step indicator.

element

<StatusGoodSmall />

stepper.current.indicator.iconSize

The size of the icon shown in the step indicator.

string

"medium"

stepper.current.indicator.substep.iconSize

The icon size used within a sub-step's indicator.

string

"small"

stepper.current.label.color

The color of the step title. Can be an object to differentiate colors between dark and light modes.

object

An object with a color for dark and light modes.

{ dark: "text-strong", light: "brand" }

stepper.currentCompleted.indicator.background

The background of the step indicator.

string

A hex, name, or rgb value.

"brand"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

stepper.currentCompleted.indicator.border

The border color of the step indicator.

string

A hex, name, or rgb value.

"brand"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

stepper.currentCompleted.indicator.color

The icon or text color of the step indicator.

string

A hex, name, or rgb value.

"white"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

stepper.currentCompleted.indicator.hover.color

The icon or text color of the step indicator when hovered.

string

A hex, name, or rgb value.

"white"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

stepper.currentCompleted.indicator.icon

The icon shown in the step indicator.

element

<FormCheckmark />

stepper.currentCompleted.indicator.iconSize

The size of the icon shown in the step indicator.

string

"medium"

stepper.currentCompleted.indicator.substep.iconSize

The icon size used within a sub-step's indicator.

string

"small"

stepper.currentCompleted.label.color

The color of the step title. Can be an object to differentiate colors between dark and light modes.

object

An object with a color for dark and light modes.

{ dark: "text-strong", light: "brand" }

stepper.currentError.indicator.background

The background of the step indicator.

string

A hex, name, or rgb value.

"status-critical"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

stepper.currentError.indicator.border

The border color of the step indicator.

string

A hex, name, or rgb value.

"status-critical"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

stepper.currentError.indicator.color

The icon or text color of the step indicator.

string

A hex, name, or rgb value.

"white"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

stepper.currentError.indicator.hover.color

The icon or text color of the step indicator when hovered.

string

A hex, name, or rgb value.

"white"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

stepper.currentError.indicator.icon

The icon shown in the step indicator.

element

<StatusCriticalSmall />

stepper.currentError.indicator.substep.iconSize

The icon size used within a sub-step's indicator.

string

"small"

stepper.currentError.label.color

The color of the step title.

string

A hex, name, or rgb value.

"status-critical"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

stepper.description.color

The color of a step's description.

string

A hex, name, or rgb value.

"brand"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

stepper.description.size

The text size of a step's description.

string

"small"

stepper.disabled.connector.color

The color of the line connecting to the next step.

string

A hex, name, or rgb value.

"border"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

stepper.disabled.indicator.background

The background of the step indicator.

string

A hex, name, or rgb value.

"background-contrast"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

stepper.disabled.indicator.border

The border color of the step indicator.

string

A hex, name, or rgb value.

"border"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

stepper.disabled.indicator.color

The icon color of the step indicator.

string

A hex, name, or rgb value.

"text-weak"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

stepper.disabled.indicator.substep.iconSize

The icon size used within a sub-step's indicator.

string

"small"

stepper.disabled.label.color

The color of the step title.

string

A hex, name, or rgb value.

"text-weak"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

stepper.error.connector.color

The color of the line connecting to the next step.

string

A hex, name, or rgb value.

"status-critical"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

stepper.error.helperText.color

The color of the step's helper/error text.

string

A hex, name, or rgb value.

"status-critical"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

stepper.error.indicator.background

The background of the step indicator.

string

A hex, name, or rgb value.

"background-front"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

stepper.error.indicator.border

The border color of the step indicator.

string

A hex, name, or rgb value.

"status-critical"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

stepper.error.indicator.color

The icon or text color of the step indicator.

string

A hex, name, or rgb value.

"status-critical"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

stepper.error.indicator.hover.background

The background of the step indicator when hovered.

string

A hex, name, or rgb value.

"background-front"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

stepper.error.indicator.icon

The icon shown in the step indicator.

element

<StatusCriticalSmall />

stepper.error.indicator.substep.iconSize

The icon size used within a sub-step's indicator.

string

"small"

stepper.error.label.color

The color of the step title.

string

A hex, name, or rgb value.

"text"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

stepper.helperText.color

The color of a step's helper text.

string

A hex, name, or rgb value.

"brand"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

stepper.helperText.size

The text size of a step's helper text, shown for a step in the "error" status.

string

"xsmall"

stepper.indicator.border.width

The border width of the step indicator.

string

"2px"

stepper.indicator.size

The size of the step indicator.

string

"small"

"medium"

"large"

stepper.label.size

The text size of a step's title.

string

"medium"

stepper.label.substep.size

The text size of a sub-step's title.

string

"small"

stepper.pending.connector.color

The color of the line connecting to the next step.

string

A hex, name, or rgb value.

"border"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

stepper.pending.indicator.background

The background of the step indicator.

string

A hex, name, or rgb value.

"background-front"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

stepper.pending.indicator.border

The border color of the step indicator.

string

A hex, name, or rgb value.

"text-xweak"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

stepper.pending.indicator.color

The icon or text color of the step indicator.

string

A hex, name, or rgb value.

"text-strong"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

stepper.pending.indicator.hover.background

The background of the step indicator when hovered.

string

A hex, name, or rgb value.

"background-front"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

stepper.pending.indicator.hover.border

The border color of the step indicator when hovered.

string

A hex, name, or rgb value.

"text-strong"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

stepper.pending.indicator.substep.iconSize

The icon size used within a sub-step's indicator.

string

"small"

stepper.pending.label.color

The color of the step title.

string

A hex, name, or rgb value.

"text"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }