Stepper
A step indicator showing progress through a multi-step process.
Default
Horizontal stepper with completed, current, and upcoming steps connected by lines.
2
Profile 3
Preferences 4
Complete Vertical
Vertically stacked stepper with circles connected by vertical lines.
Account
Create your account credentials
2
Profile
Set up your personal profile
3
Preferences
Configure your preferences
4
Complete
Review and finish setup
With Descriptions
Horizontal stepper where each step includes a title and a description below.
Account
Create your account
2
Details
Fill in your details
3
Preferences
Set your preferences
4
Complete
Review and confirm
Sizes
Stepper in small, default, and large size variants.
Small
2
Profile 3
Preferences 4
Complete Default
2
Profile 3
Preferences 4
Complete Large
2
Profile 3
Preferences 4
Complete With Error
A stepper where one step shows an error state with destructive styling.
4
Complete