Steps

Used to indicate progress through a multi-step process

Step 2

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 defaultStep={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

npx @chakra-ui/cli snippet add steps

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

Usage

import {
  StepsCompletedContent,
  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>
  )
}

Controlled

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

Step 2

"use client"

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 { useState } from "react"

const Demo = () => {
  const [step, setStep] = useState(1)

  return (
    <StepsRoot step={step} onStepChange={(e) => setStep(e.step)} 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>
  )
}

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.

current step: 1

Step 2

"use client"

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

const Demo = () => {
  const steps = useSteps({
    defaultStep: 1,
    count: 3,
  })

  return (
    <Stack align="flex-start">
      <Code>current step: {steps.value}</Code>
      <StepsRootProvider value={steps}>
        <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>
      </StepsRootProvider>
    </Stack>
  )
}

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.

Status

Switch

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