Steps

Used to indicate progress through a multi-step process

Step 1

import { Group } from "@chakra-ui/react"
import { Button } from "@/components/ui/button"
import {
  StepsCompletedContent,
  StepsContent,
  StepsItem,
  StepsList,
  StepsNextTrigger,
  StepsPrevTrigger,
  StepsRoot,
} from "@/components/ui/steps"

const Demo = () => {
  return (
    <StepsRoot defaultValue={1} count={3}>
      <StepsList>
        <StepsItem index={0} title="Step 1" />
        <StepsItem index={1} title="Step 2" />
        <StepsItem index={2} title="Step 3" />
      </StepsList>

      <StepsContent index={0}>Step 1</StepsContent>
      <StepsContent index={1}>Step 2</StepsContent>
      <StepsContent index={2}>Step 3</StepsContent>
      <StepsCompletedContent>All steps are complete!</StepsCompletedContent>

      <Group>
        <StepsPrevTrigger asChild>
          <Button variant="outline" size="sm">
            Prev
          </Button>
        </StepsPrevTrigger>
        <StepsNextTrigger asChild>
          <Button variant="outline" size="sm">
            Next
          </Button>
        </StepsNextTrigger>
      </Group>
    </StepsRoot>
  )
}

Setup

If you don't already have the snippet, run the following command to add the steps snippet

chakra snippet add steps

The snippet includes a closed component composition for the Steps component.

Usage

import {
  StepsCompleteContent,
  StepsContent,
  StepsItem,
  StepsList,
  StepsNextTrigger,
  StepsPrevTrigger,
  StepsRoot,
} from "@/components/ui/steps"

<StepsRoot>
  <StepsList>
    <StepsItem />
  </StepsList>
  <StepsContent />
  <StepsCompleteContent />
  <StepsPrevTrigger />
  <StepsNextTrigger />
</StepsRoot>

Examples

Sizes

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

Step 1

import { For, Group, Stack } from "@chakra-ui/react"
import { Button } from "@/components/ui/button"
import {
  StepsCompletedContent,
  StepsContent,
  StepsItem,
  StepsList,
  StepsNextTrigger,
  StepsPrevTrigger,
  StepsRoot,
} from "@/components/ui/steps"

const Demo = () => {
  return (
    <Stack gap="16">
      <For each={["sm", "md", "lg"]}>
        {(size) => (
          <StepsRoot key={size} size={size} count={3}>
            <StepsList>
              <StepsItem index={0} title="Step 1" />
              <StepsItem index={1} title="Step 2" />
              <StepsItem index={2} title="Step 3" />
            </StepsList>

            <StepsContent index={0}>Step 1</StepsContent>
            <StepsContent index={1}>Step 2</StepsContent>
            <StepsContent index={2}>Step 3</StepsContent>
            <StepsCompletedContent>
              All steps are complete!
            </StepsCompletedContent>

            <Group>
              <StepsPrevTrigger asChild>
                <Button variant="outline" size="sm">
                  Prev
                </Button>
              </StepsPrevTrigger>
              <StepsNextTrigger asChild>
                <Button variant="outline" size="sm">
                  Next
                </Button>
              </StepsNextTrigger>
            </Group>
          </StepsRoot>
        )}
      </For>
    </Stack>
  )
}

Variants

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

Step 1

import { For, Group, Stack } from "@chakra-ui/react"
import { Button } from "@/components/ui/button"
import {
  StepsCompletedContent,
  StepsContent,
  StepsItem,
  StepsList,
  StepsNextTrigger,
  StepsPrevTrigger,
  StepsRoot,
} from "@/components/ui/steps"

const Demo = () => {
  return (
    <Stack gap="16">
      <For each={["subtle", "solid"]}>
        {(variant) => (
          <StepsRoot key={variant} variant={variant} count={3}>
            <StepsList>
              <StepsItem index={0} title="Step 1" />
              <StepsItem index={1} title="Step 2" />
              <StepsItem index={2} title="Step 3" />
            </StepsList>

            <StepsContent index={0}>Step 1</StepsContent>
            <StepsContent index={1}>Step 2</StepsContent>
            <StepsContent index={2}>Step 3</StepsContent>
            <StepsCompletedContent>
              All steps are complete!
            </StepsCompletedContent>

            <Group>
              <StepsPrevTrigger asChild>
                <Button variant="outline" size="sm">
                  Prev
                </Button>
              </StepsPrevTrigger>
              <StepsNextTrigger asChild>
                <Button variant="outline" size="sm">
                  Next
                </Button>
              </StepsNextTrigger>
            </Group>
          </StepsRoot>
        )}
      </For>
    </Stack>
  )
}

Colors

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

Step 1

import { For, Group, Stack } from "@chakra-ui/react"
import { colorPalettes } from "compositions/lib/color-palettes"
import { Button } from "@/components/ui/button"
import {
  StepsCompletedContent,
  StepsContent,
  StepsItem,
  StepsList,
  StepsNextTrigger,
  StepsPrevTrigger,
  StepsRoot,
} from "@/components/ui/steps"

const Demo = () => {
  return (
    <Stack gap="10" width="full">
      <For each={colorPalettes}>
        {(colorPalette) => (
          <StepsRoot
            key={colorPalette}
            defaultValue={1}
            count={3}
            colorPalette={colorPalette}
          >
            <StepsList>
              <StepsItem index={0} title="Step 1" />
              <StepsItem index={1} title="Step 2" />
              <StepsItem index={2} title="Step 3" />
            </StepsList>

            <StepsContent index={0}>Step 1</StepsContent>
            <StepsContent index={1}>Step 2</StepsContent>
            <StepsContent index={2}>Step 3</StepsContent>
            <StepsCompletedContent>
              All steps are complete!
            </StepsCompletedContent>

            <Group>
              <StepsPrevTrigger asChild>
                <Button variant="outline" size="sm">
                  Prev
                </Button>
              </StepsPrevTrigger>
              <StepsNextTrigger asChild>
                <Button variant="outline" size="sm">
                  Next
                </Button>
              </StepsNextTrigger>
            </Group>
          </StepsRoot>
        )}
      </For>
    </Stack>
  )
}

Vertical

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

Step 1

import { Group, Stack } from "@chakra-ui/react"
import { Button } from "@/components/ui/button"
import {
  StepsCompletedContent,
  StepsContent,
  StepsItem,
  StepsList,
  StepsNextTrigger,
  StepsPrevTrigger,
  StepsRoot,
} from "@/components/ui/steps"

const Demo = () => {
  return (
    <StepsRoot orientation="vertical" height="400px" defaultValue={1} count={3}>
      <StepsList>
        <StepsItem index={0} title="Step 1" />
        <StepsItem index={1} title="Step 2" />
        <StepsItem index={2} title="Step 3" />
      </StepsList>

      <Stack>
        <StepsContent index={0}>Step 1</StepsContent>
        <StepsContent index={1}>Step 2</StepsContent>
        <StepsContent index={2}>Step 3</StepsContent>
        <StepsCompletedContent>All steps are complete!</StepsCompletedContent>

        <Group>
          <StepsPrevTrigger asChild>
            <Button variant="outline" size="sm">
              Prev
            </Button>
          </StepsPrevTrigger>
          <StepsNextTrigger asChild>
            <Button variant="outline" size="sm">
              Next
            </Button>
          </StepsNextTrigger>
        </Group>
      </Stack>
    </StepsRoot>
  )
}

Icon

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

Contact Details

import { Group } from "@chakra-ui/react"
import { Button } from "@/components/ui/button"
import {
  StepsCompletedContent,
  StepsContent,
  StepsItem,
  StepsList,
  StepsNextTrigger,
  StepsPrevTrigger,
  StepsRoot,
} from "@/components/ui/steps"
import { LuCalendar, LuUser, LuWallet } from "react-icons/lu"

const Demo = () => {
  return (
    <StepsRoot defaultValue={1} count={3}>
      <StepsList>
        <StepsItem index={0} icon={<LuUser />} />
        <StepsItem index={1} icon={<LuWallet />} />
        <StepsItem index={2} icon={<LuCalendar />} />
      </StepsList>

      <StepsContent index={0}>Contact Details</StepsContent>
      <StepsContent index={1}>Payment</StepsContent>
      <StepsContent index={2}>Book an Appointment</StepsContent>
      <StepsCompletedContent>All steps are complete!</StepsCompletedContent>

      <Group>
        <StepsPrevTrigger asChild>
          <Button variant="outline" size="sm">
            Prev
          </Button>
        </StepsPrevTrigger>
        <StepsNextTrigger asChild>
          <Button variant="outline" size="sm">
            Next
          </Button>
        </StepsNextTrigger>
      </Group>
    </StepsRoot>
  )
}

Description

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

Step 1

import { Group } from "@chakra-ui/react"
import { Button } from "@/components/ui/button"
import {
  StepsCompletedContent,
  StepsContent,
  StepsItem,
  StepsList,
  StepsNextTrigger,
  StepsPrevTrigger,
  StepsRoot,
} from "@/components/ui/steps"

const Demo = () => {
  return (
    <StepsRoot defaultValue={1} count={3}>
      <StepsList>
        <StepsItem index={0} title="Step 1" description="This step" />
        <StepsItem index={1} title="Step 2" description="That step" />
        <StepsItem index={2} title="Step 3" description="Final step" />
      </StepsList>

      <StepsContent index={0}>Step 1</StepsContent>
      <StepsContent index={1}>Step 2</StepsContent>
      <StepsContent index={2}>Step 3</StepsContent>
      <StepsCompletedContent>All steps are complete!</StepsCompletedContent>

      <Group>
        <StepsPrevTrigger asChild>
          <Button variant="outline" size="sm">
            Prev
          </Button>
        </StepsPrevTrigger>
        <StepsNextTrigger asChild>
          <Button variant="outline" size="sm">
            Next
          </Button>
        </StepsNextTrigger>
      </Group>
    </StepsRoot>
  )
}

Props

Root

Prop	Default	Type
`orientation`	`'horizontal'`	`'vertical' \| 'horizontal'` The orientation of the component
`colorPalette`	`'gray'`	`'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink' \| 'accent'` The color palette of the component
`variant`	`'solid'`	`'solid' \| 'subtle'` The variant of the component
`size`	`'md'`	`'sm' \| 'md' \| 'lg'` The size of the component
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`count`		`number` The total number of steps
`defaultStep`		`number` The initial value of the step
`ids`		`ElementIds` The custom ids for the stepper elements
`linear`		`boolean` If `true`, the stepper requires the user to complete the steps in order
`onStepChange`		`(details: StepChangeDetails) => void` Callback to be called when the value changes
`onStepComplete`		`VoidFunction` Callback to be called when a step is completed
`step`		`number` The current value of the stepper
`as`		`React.ElementType` The underlying element to render.
`unstyled`		`boolean` Whether to remove the component's style.

Steps

.css-vfo6uh{color:var(--chakra-colors-fg);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--chakra-colors-border-emphasized);font-weight:500;}Setup

Setup