Chakra UI Logochakra-ui-stepsv2.0.3
Chakra UI Logochakra-ui-stepsv2.0.3

Props

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

Steps

PropTypeRequiredDescription
activeStepnumberyesCurrently active step
colorSchemestringnoSets the color accent of the Steps component show
orientationstringnoSets the orientation of the Steps component
responsivebooleannoSets whether the component auto switches to vertical orientation on mobile
checkIconReact.ComponentTypenoAllows you to provide a custom check icon
onClickStep() => voidnoIf defined, allows you to click on the step icons
state'loading' | 'error'noLet's you set the state to error or loading

Step

PropTypeRequiredDescription
labelstringnoSets the title of the step
descriptionstringnoProvides extra info about the step
iconReact.ComponentTypenoCustom icon to overwrite the default numerical indicator of the step
isCompletedStepbooleannoIndividually control each step state, defaults to active step
isKeepErrorbooleannoIndividually control if each step should keep showing the error state
checkIconReact.ComponentTypenoAllows you to provide a custom check icon that will override the one provided to Steps
state'loading' | 'error'noLet's you set the state in a specific Step, if defined it will override the one provided to Steps