Steps
Indicate progress through numbered steps in multi-step workflows.
Props#
Steps
and all sub components accepts all Box
props.
Steps#
Prop | Type | Default | Description |
---|---|---|---|
index | number | The current step index. | |
onChange | (index: number) => void | Callback invoked when the step changes. | |
step | string | number | The current step index or name. | |
stepperProps | StepperProps | Props to pass to the stepper component. |
StepsItem#
Prop | Type | Default | Description |
---|---|---|---|
description | type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortal
| PromiseLikeOfReactNode | The step description | |
icon | type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortal
| PromiseLikeOfReactNode | Show an icon instead of the step number | |
isActive | boolean | Show the step as active | |
isCompleted | boolean | Show the step as completed | |
name | string | The step name | |
render | (
props?: any,
) => ReactElement<any, string | JSXElementConstructor<any>> | Custom render function | |
title | type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortal
| PromiseLikeOfReactNode | The step title |
StepperContent#
Prop | Type | Default | Description |
---|---|---|---|
isOpen | boolean | Show or hide the content, only when orientation is vertical. |
Was this helpful?