Stepper
Step indicator with labels, connectors, and status visualization for multi-step processes
Basic Horizontal Stepper
With Icons and Descriptions
Review your items
Enter delivery address
Complete your purchase
Order complete
Step 1: Cart
Review your items
Vertical Stepper
Name, email, and phone
Shipping and billing address
Payment method
Review and submit
Variants
Default
Outlined
Filled
With Error State
Error: Please verify your email address before continuing.
Optional Steps
Interactive (Clickable Steps)
Click on any step to navigate directly to it.
All Steps Completed
Setup Complete!
All steps have been successfully completed.
Color Variants
Primary (Default)
Secondary
Success
Error
Practical Example: Multi-Step Form
Select notification types
Mark important notifications
Control visibility
Save your settings
Step Content
Mark which notifications are most important to you...
Usage Guidelines
When to Use
- Multi-step forms
- Checkout flows
- Onboarding wizards
Accessibility
- Step progress announced
- Current step indicated
Performance
- Static step rendering
- CSS-based connectors
Common Mistakes
- No validation between steps
- Steps can't be revisited
Frequently Asked Questions
Related Components
View allCollapsible content sections with single/multiple expansion modes, animation, and keyboard navigation
User avatar with image loading, fallback text generation, status indicators, and shape variants
Stacked avatar display with overflow handling, max count configuration, and hover expansion
Status indicator with variant system, dot mode, positioning, and pulsing animation support