Stepper
A stateful multi-step wizard with navigation, per-step validation gating, and accessible step indicators.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Stepper />
When to Use
- Guide users through multi-step forms or onboarding flows.
- Break a complex task into sequential, digestible steps.
- Enforce step-by-step completion with validation gating before advancing.
Account InfoSet up your account
ProfilePersonalize your profile
ReviewConfirm your details
Enter your basic account information.
BasicsRequired info
ExtrasAdditional setupOptional
Finish
EmailRequired to continue
Done
The Next button stays disabled until you type something.
OneJump freely
TwoNon-linear
Three
Click any step header to navigate directly.
Choose plan
Pick a subscription
Payment
Enter billing details
Confirm
Select the plan that fits your needs.
On a horizontal Stepper, a header rail with several long-labeled steps scrolls within its own container instead of forcing the page wider — resize this box to see it.
Account information setup
Shipping address details
Payment method selection
Final order confirmation
First step.
Pick a value to see it applied live.
Account InfoSet up your account
ProfilePersonalize your profile
ReviewConfirm your details