Steps - Keep React
Table of Contents#
- Default Step
- Step With Number
- Step With Icon
- Step With Dashed Border
- Interactive Step
- Step API Reference
- Step Item API Reference
Default Step#
The Default Step refers to the fundamental and default configuration of a Steps Component within a user interface. It provides a clear visual representation of each step in a multi-step process.
Step With Number#
To change the step style use the stepType="number" prop.
Step With Icon#
To change the step style use the stepType="icon" prop and use the icon props in steps items.
Step With Dashed Border#
To change the border style between two steps and apply a dashed line, use the borderType="dashed" prop.
Interactive Step#
Step API Reference#
Explore the available props for the <Step/> component
| Property | Description | Type | Default |
|---|---|---|---|
| stepType | Type of step item to display. | point icon number | point |
| children | Optional children elements. | ReactNode | ReactNode |
| borderType | Type of border for the step item. | solid dashed none | solid |
Step Item API Reference#
Explore the available props for the <Step.Item/> component
| Property | Description | Type | Default |
|---|---|---|---|
| title | Title for the step item. | string | text |
| description | Description for the step item. | string | text |
| numberOfSteps | The step number for this item. | number | 1 |
| completed | Indicates if the step is completed. | boolean | false |
| icon | An optional icon element to display. | ReactNode | Icon |
| active | Indicates if the step is active. | boolean | false |
| titleStyle | Custom class to style the step title. | string | None |
| descriptionStyle | Custom class to style the step description. | string | None |
| stepStyle | Custom class to style the step type. | string | None |