Stepper

Import#

Chakra UI exports the followings components:

import {
  Step,
  StepDescription,
  StepIcon,
  StepIndicator,
  StepNumber,
  StepSeparator,
  StepStatus,
  StepTitle,
  Stepper,
  useSteps,
} from '@chakra-ui/react'

Usage#

Use the step indicator component to show the user’s position in and progress through a multi-step process. Step indicators are often used on application forms or workflow screens.

The useSteps hook is exported to help manage the state of stepper and the active step index.

Here's a basic example of a horizontal stepper:

Changing the orientation#

Changing the size#

To change the size of the step indicator, you can pass the size prop to the Stepper component, setting it to either sm, md or lg.

Changing the color scheme#

The stepper uses a blue color scheme by default. To change the colorScheme, you can pass the colorScheme prop to Stepper component to any color in the theme.

Changing the step indicator's content#

In some cases you might want to render custom icons or elements within the StepIndicator component.

To do this, you can leverage the StepStatus component to show custom React elements based on the step's status.

Setting the active step with click#

Adding a progress bar#

You can replace the StepSeparator component with a custom progress indicator, e.g. the Progress component for more custom experience.

Showing step summary#

A step summary can be shown when labels are hidden. The step summary allows the user to see the label of the current step directly below the step group and is recommended for smaller screens and responsive mobile views.

Props#

Stepper Props#

StepStatus Props#

All other components are passed through to their underlying components.

Theming#

The Stepper component is a multipart component. The styling needs to be applied to each part specifically.

Anatomy#

The Stepper theming is made up of the following parts:

• stepper: Maps to the Stepper component
• step: Maps to the Step component
• title: Maps to the StepTitle component
• description: Maps to the StepDescription component
• indicator: Maps to the StepIndicator component
• separator: Maps to the StepSeparator component
• icon: Maps to the StepIcon component
• number: Maps to the StepNumber component

Customizing a component#

Let's say we want to override the step indicator to use a square instead of a circle. Here's how we'll go about that:

// themes/stepper.ts

const baseStyle = {
  // select the indicator part
  indicator: {
    // change the default border radius to 0
    borderRadius: 0,
  },
}

const stepperTheme = {
  baseStyle,
}

const theme = extendTheme({
  components: {
    Stepper: stepperTheme,
  },
})

Changing the styles for a specific size#

In addition to the baseStyle, you can also change the styles for a specific size. Let's say we want to change the step title's font size for the lg size.

// themes/stepper.ts

const baseStyle = {
  indicator: {
    borderRadius: 0,
  },
}

const sizes = {
  lg: {
    // select the title part
    title: {
      // change the font size to lg
      fontSize: 'lg',
    },
  },
}

const stepperTheme = {
  baseStyle,
  sizes,
}

const theme = extendTheme({
  components: {
    Stepper: stepperTheme,
  },
})

The styling for a stepper component can be overriden at any level, whether it's variant or size, it's completely up to you.

To learn more about styling multipart components, visit the Component Style page.