Steps
A step tracker for multi-step workflows and wizards.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Steps />
When to Use
- Multi-step processes such as forms, registrations, or checkout flows
- Setup wizards that guide users through sequential configuration
- Onboarding flows where users complete tasks in a defined order
- Checkout or payment workflows with clearly defined stages
Account
Create your account
Profile
Set up your profile
Complete
All done
Details
Payment
Review
Confirm
Current step: 0
Sign Up
Create an account
Verify Email
Confirm your email address
Set Password
Choose a secure password
Done
Start using the app
Switch orientation to compare horizontal and vertical layouts.
Account
Create your account
Profile
Set up your profile
Payment
Add billing info
Done
All finished
Account
Create your account
Profile
Set up your profile
Payment
Add billing
Complete
All done
Active dot pulses; the connector draws in on Next and retracts on Previous.
API Reference
Steps
| Property | Type | Default | Description |
|---|---|---|---|
| CurrentStep | int | 0 | Zero-based index of the current step. |
| Clickable | bool | false | Allow clicking on steps to navigate. |
| Orientation | Lumeo.Orientation | Horizontal | Layout direction. Values: Horizontal, Vertical. |
| Animated | bool | false | When true, the current step's indicator pulses and completed connectors draw themselves in. |
| CurrentStepChanged | EventCallback<int> | — | Two-way binding callback for the active step index. |
StepsItem
| Property | Type | Default | Description |
|---|---|---|---|
| Title | string? | null | Step title text. |
| Description | string? | null | Optional description below the title. |
| Status | StepsItemStatus | Auto | Explicit status override. Values: Auto, Upcoming, Active, Complete, Error. |
| IconContent | RenderFragment? | null | Custom icon slot for this step. |