Steps

Usage

import { Steps } from "@chakra-ui/react"

<Steps.Root>
  <Steps.List>
    <Steps.Item>
      <Steps.Trigger>
        <Steps.Indicator />
        <Steps.Title />
        <Steps.Description />
      </Steps.Trigger>
      <Steps.Separator />
    </Steps.Item>
  </Steps.List>
  <Steps.Content />
  <Steps.CompletedContent />
  <Steps.PrevTrigger />
  <Steps.NextTrigger />
</Steps.Root>

Examples

Sizes

Use the size prop to change the size of the steps component.

Variants

Use the variant prop to change the appearance of the steps component.

Colors

Use the colorPalette prop to change the color scheme of the component.

Trigger

Use the Steps.Trigger component to make the step clickable.

Vertical

Use the orientation prop to change the orientation of the steps component.

Controlled

Use the step and onStepChange props to control the current step of the steps component.

Validation

Use the isStepValid prop to validate each step before allowing navigation. Use the onStepInvalid prop to handle invalid step transitions.

Store

An alternative way to control the steps is to use the RootProvider component and the useSteps store hook.

This way you can access the steps state and methods from outside the steps.

Icon

Pass the icon prop to the StepsItem component to display an icon.

Description

Pass the description prop to the StepsItem component to display a description.

Props

Root

Explorer

Explore the Steps component parts interactively. Click on parts in the sidebar to highlight them in the preview.