Chakra UI Steps

Props

Props table for all components provided by chakra-ui-steps.

Prop	Type	Required	Description
activeStep	`number`	yes	Currently active step
colorScheme	`string`	no	Sets the color accent of the Steps component show
orientation	`string`	no	Sets the orientation of the Steps component
responsive	`boolean`	no	Sets whether the component auto switches to vertical orientation on mobile
mobileBreakpoint	`string`	no	Sets the breakpoint value at which the component switches to vertical orientation.
checkIcon	`React.ComponentType`	no	Allows you to provide a custom check icon
errorIcon	`React.ComponentType`	no	Allows you to provide a custom error icon
onClickStep	`(step: number) => void`	no	If defined, allows you to click on the step icons
trackColor	`string`	no	Sets the color of the track between the steps.
state	`'loading' \| 'error'`	no	Let's you set the state to error or loading
variant	`'circles' \| 'circles-alt' \| 'simple'`	no	Sets the variant of the Steps component
expandVerticalSteps	`boolean`	no	Control whether or not the vertical steps should collapse

Prop	Type	Required	Description
label	`string`	no	Sets the title of the step
description	`string`	no	Provides extra info about the step
icon	`React.ComponentType`	no	Custom icon to overwrite the default numerical indicator of the step
state	`'loading' \| 'error'`	no	Let's you set the state to error or loading
isCompletedStep	`boolean`	no	Individually control each step state, defaults to active step
isKeepError	`boolean`	no	Individually control if each step should keep showing the error state
checkIcon	`React.ComponentType`	no	Allows you to provide a custom check icon that will override the one provided to Steps
errorIcon	`React.ComponentType`	no	Allows you to provide a custom error icon that will override the one provided to Steps

Along with the components, chakra-ui-steps provides a useSteps hook that can be used to control the state of the steps.

import { useSteps } from "chakra-ui-steps";

const { nextStep, prevStep, reset, activeStep, setStep } = useSteps({
  initialStep: 0,
});