Stepper
Demo
1
Step 1
This is the first step
2
Step 2
This is the second step
3
Step 3
This is the third step
Props
| Prop | Type | Description |
|---|---|---|
children | Step[] | An array of step objects, each containing a title, optional description, icon, and custom content. |
showIndex | boolean (optional) | If true, displays the index number for each step. |
classNames | { root?: string; index?: string; title?: string; description?: string } (optional) | Custom class names for different parts of the Stepper. |
Step
Represents a single step in the stepper.
| Property | Description | Type/Values |
|---|---|---|
| title | The title or main headline for the step. | string |
| description? | An additional description or details for the step. | string |
| icon? | Optional icon that represents the step. | React.ReactNode |
| content? | Optional content or elements to display for the step. | React.ReactNode |
Styles
This component allows for custom styles via the classNames prop:
root: CSS class for styling the overall Stepper component.index: CSS class for styling the index or icon indicator of each step.title: CSS class for styling the title of each step.description: CSS class for styling the description of each step.
Functionality
- The Stepper component is ideal for guiding users through a multi-step process or displaying progress through stages.
- Supports both numerical indices and custom icons to denote each step.
- Enhances the user experience in scenarios like form wizards, checkout processes, or instructional content.