Stepper
View on StorybookStorybookMulti-step progress indicator for forms and wizards
Preview
tsx
Variants
Three visual styles: default, simple, and circles
Simple Variant
Compact style ideal for top navigation
tsx
Circles Variant
Large circles with scale effect
Cart
Shipping
Payment
Review
tsx
Vertical Orientation
Account Information
Enter your basic details
Profile Setup
Customize your profile
Preferences(Optional)
Set your preferences
Complete
Review and finish
tsx
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)
Best Practices
Do
- ✓ Show clear step labels and progress indication
- ✓ Allow navigation to completed steps
- ✓ Keep step count manageable (3-5 steps ideal)
Don't
- ✗ Don't allow skipping required steps
- ✗ Don't use for non-sequential processes — use Tabs
- ✗ Don't show too many steps on mobile without adaptation