Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsShowcaseBlogGuides
Sponsor

Steps

Used to indicate progress through a multi-step process

SourceStorybookRecipeArk
AI TipWant to skip the docs? Use the MCP Server
Step 1
Step 2
Step 3
Step 2 description

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.

Step 1
Step 2
Step 3
Step 1 description
Step 1
Step 2
Step 3
Step 1 description
Step 1
Step 2
Step 3
Step 1 description

Variants

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

Step 1
Step 2
Step 3
Step 1 description
Step 1
Step 2
Step 3
Step 1 description

Colors

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

Step 1
Step 2
Step 3
Step 2 description
Step 1
Step 2
Step 3
Step 2 description
Step 1
Step 2
Step 3
Step 2 description
Step 1
Step 2
Step 3
Step 2 description
Step 1
Step 2
Step 3
Step 2 description
Step 1
Step 2
Step 3
Step 2 description
Step 1
Step 2
Step 3
Step 2 description
Step 1
Step 2
Step 3
Step 2 description
Step 1
Step 2
Step 3
Step 2 description
Step 1
Step 2
Step 3
Step 2 description

Trigger

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

Step 2 description

Vertical

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

Step 1
Step 2
Step 3
Step 2 description

Controlled

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

Step 1
Step 2
Step 3
Step 2 description

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 1
Step 2
Step 3
Step 2 description

Icon

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

Payment

Description

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

Step 1
This step
Step 2
That step
Step 3
Final step
Step 2 content

Props

Root

PropDefaultType
orientation horizontal
'vertical' | 'horizontal'

The orientation of the component

colorPalette gray
'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'

The color palette of the component

variant solid
'solid' | 'subtle'

The variant of the component

size md
'xs' | 'sm' | 'md' | 'lg'

The size of the component

as
React.ElementType

The underlying element to render.

asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.
unstyled
boolean

Whether to remove the component's style.

count
number

The total number of steps

defaultStep
number

The initial value of the stepper when rendered. Use when you don't need to control the value of the stepper.

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 controlled value of the stepper

Explorer

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

Onboarding Steps

Create Account
Profile Setup

Add your personal details, profile picture, and preferences so we can tailor your experience.

Get Started

Component Anatomy

Hover to highlight, click to select parts

root

list

item

trigger

indicator

separator

content

title

description

nextTrigger

prevTrigger

progress

steps.recipe.ts

Previous

Pagination

Next

Tabs