Step Indicators

Step indicators guide users through multi-step processes by showing progress and structure at a glance.

Default stepper

Contained stepper

With label Top

Label

1. Label2. Label3. Label

With label Bottom

Label

1. Label2. Label3. Label

Text stepper Horizontal

Completed: Account
2Current step: Profile
3Verify
4Preferences
5Done

Text stepper Vertical

Completed: AccountCreate your account
2Current step: ProfileTell us about yourself
3VerifyConfirm your email
4PreferencesSet your preferences
5DoneYou're all set

Completed: Account
2Current step: Profile
3Verify
4Preferences
5Done

API References

StepIndicator

PropTypeDefault

total / current

number

—

variant

"dot""dash""horizontal"

"dot"

style

"default""contained""topLabel""bottomLabel"

"default"

label

ReactNode

—

labels

ReactNode[]

—

aria-label

string

—

className

string

" "

Stepper

PropTypeDefault

items

{ label, description? }[]

—

current

number

—

className

string

" "

VerticalStepper

PropTypeDefault

variant

"tail""cards"

"tail"

className

string

" "