Stepper
The Stepper element displays a step-by-step wizard with progress indicators. Users navigate through steps sequentially with visual feedback on completed, active, and upcoming steps.
Features
- Horizontal or vertical step layout
- Step states — completed (checkmark), active (filled), upcoming (outline)
- Connecting lines between steps
- Optional descriptions under each step label
- Click navigation on completed steps (optional)
- Previous/Next buttons
Settings
| Setting | Description | Default |
|---|---|---|
| Accent Color | Color for active step | #4285F4 |
| Completed Color | Color for completed steps | #0f9d58 |
| Orientation | Layout: horizontal or vertical | horizontal |
| Show Descriptions | Display description under each step | true |
| Allow Click Nav | Allow clicking completed steps to go back | false |
Steps
Each step has:
- Label — step name (e.g., "Account", "Profile")
- Description — brief description text
Click + Add to add steps. Click x to remove.
Use Cases
- Multi-step forms and wizards
- Onboarding flows
- Checkout processes
- Registration workflows
Questions?
If you have any questions, please don't hesitate to contact us. Alternatively, you can submit an issue on this platform.