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 />
22 tests across 8 files. Auto-generated from the test suite.
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
Payment
Card declined
Review
Confirm details
Done
All finished
Account
Create your account
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
| Prop | Type | Default | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | — | The StepsItem elements that make up the progress trail. |
| CurrentStep | int | 0 | Zero-based index of the currently active step. Pair with CurrentStepChanged for two-way binding. |
| Clickable | bool | false | When true, steps become clickable and clicking one navigates CurrentStep to it. Default is false. |
| Orientation | Lumeo.Orientation | Lumeo.Orientation.Horizontal | Layout direction of the trail. Defaults to Horizontal. |
| Animated | bool | false | When true, enables opt-in motion: the current step's indicator pulses, connector lines draw in on advance, and retract on reverse. Default is false (no animation, original behaviour). |
| Class | string? | — | Additional CSS classes merged onto the root div element. |
| AdditionalAttributes | Dictionary<string, object>? | — | Unmatched attributes are splatted onto the root div element. |
Events
| CurrentStepChanged | EventCallback<int> | Raised when the user clicks a step (only fires while Clickable is true). |
StepsItem
| Prop | Type | Default | Description |
|---|---|---|---|
| Title | string? | — | The step's label, shown below the indicator and used as the accessible name (falls back to "Step N" when unset). |
| Description | string? | — | Optional muted caption shown below Title. |
| Status | StepsItemStatus | StepsItemStatus.Default | When Error and this is the current step, renders an error indicator (red border, X icon) instead of the normal current-step styling. Default is Default. |
| IconContent | RenderFragment? | — | Icon slot. Named IconContent to avoid shadowing the <Icon> component. |
| Class | string? | — | Additional CSS classes merged onto the root div element. |
| AdditionalAttributes | Dictionary<string, object>? | — | Unmatched attributes are splatted onto the root div element. |