Stepper
Multi-step progress indicator for forms and wizards
Preview
Variants
Three visual styles: default, simple, and circles
Simple Variant
Compact style ideal for top navigation
Circles Variant
Large circles with scale effect
Cart
Shipping
Payment
Review
Vertical Orientation
Account Information
Enter your basic details
Profile Setup
Customize your profile
Preferences(Optional)
Set your preferences
Complete
Review and finish
Use Cases
📝Registration Forms
🛒Checkout Process
⚙️Setup Wizards
🔄Multi-step Workflows
Type Definitions
API Reference
| Name | Type | Default | Description |
|---|---|---|---|
stepsRequired | Step[] | — | Array of step objects with id, title, titleAr, description, optional fields |
currentStepRequired | number | — | Index of the current step (0-based) |
onStepClick | (step: number) => void | — | Callback when a step is clicked |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Layout orientation of the stepper |
variant | 'default' | 'simple' | 'circles' | 'default' | Visual style variant |
allowSkip | boolean | false | Allow clicking on future steps |
Features
- Three visual variants (default, simple, circles)
- Horizontal and vertical orientations
- Clickable steps with validation
- Optional steps support
- Visual states (complete, current, upcoming)
- Full bilingual support
- RTL/LTR support
- Accessibility features (ARIA)