name
detail
Welcome to the StepOne components documentation
StepOne Fundation
StepOne Modules
Stepper
Used to keep the user on track when completing a specific task. By dividing the end goal into smaller sub tasks.
Stepper Props
| Name | Use | Type | Definition |
| children | required | React.ReactElement<typeof Step> | React.ReactElement<typeof Step>[] | The child components that represent the steps. |
| className | optional | string | Additional class name(s) for the component. |
| numbered | optional | boolean | Indicates whether the steps should be numbered. |
| onClickStep | optional | (stepIndex: number) => void | Handler function that gets called when a step is clicked. |
| vertical | optional | boolean | Indicates whether the steps should be displayed vertically or horizontally. |
Step
Used for defining every step within the Stepper.
Step Props
| Name | Use | Type | Definition |
| name | required | string | The name of the step that will be displayed on the component. |
| detail | optional | string | A helper text for the step, providing additional information or hints. |
| status | optional | TStatus | The status of the component that will be reflected on itself. |
Examples
Horizontal Stepper
Base model
name
detail
name
detail
name
detail
Vertical Stepper
Base model
name
detail
name
detail
name
detail
name
detail
Variants
Without helper
To create stepper without helper just remove "detail" property.
Horizontal Stepper
No helper
name
name
name
name