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 | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | The step description | |
| icon | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | 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 | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | The step title |
StepperContent#
| Prop | Type | Default | Description |
|---|---|---|---|
| isOpen | boolean | Show or hide the content, only when orientation is vertical. |
Was this helpful?