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?