Chakra UI Logochakra-ui-stepsv2.1.0
Chakra UI Logochakra-ui-stepsv2.1.0

Props

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

<Steps />

PropTypeRequiredDescription

activeStep

numberyesCurrently active step

colorScheme

stringnoSets the color accent of the Steps component show

orientation

stringnoSets the orientation of the Steps component

responsive

booleannoSets whether the component auto switches to vertical orientation on mobile

mobileBreakpoint

stringnoSets the breakpoint value at which the component switches to vertical orientation.

checkIcon

React.ComponentTypenoAllows you to provide a custom check icon

errorIcon

React.ComponentTypenoAllows you to provide a custom error icon

onClickStep

(step: number) => voidnoIf defined, allows you to click on the step icons

trackColor

stringnoSets the color of the track between the steps.

state

'loading' | 'error'noLet's you set the state to error or loading

variant

'circles' | 'circles-alt' | 'simple'noSets the variant of the Steps component

expandVerticalSteps

booleannoControl whether or not the vertical steps should collapse

<Step />

PropTypeRequiredDescription

label

stringnoSets the title of the step

description

stringnoProvides extra info about the step

icon

React.ComponentTypenoCustom icon to overwrite the default numerical indicator of the step

state

'loading' | 'error'noLet's you set the state to error or loading

isCompletedStep

booleannoIndividually control each step state, defaults to active step

isKeepError

booleannoIndividually control if each step should keep showing the error state

checkIcon

React.ComponentTypenoAllows you to provide a custom check icon that will override the one provided to Steps

errorIcon

React.ComponentTypenoAllows you to provide a custom error icon that will override the one provided to Steps

Hooks

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,
});
Chakra UI Logochakra-ui-steps

Examples

Props

Recipes

Made with

Heart icon

by

jeanverster