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
Choose plan
Pick a subscription
Payment
Enter billing details
Confirm
Select the plan that fits your needs.
Pick a value to see it applied live.
Account InfoSet up your account
ProfilePersonalize your profile
ReviewConfirm your details
API Reference
Stepper
| Property | Type | Default | Description |
|---|---|---|---|
| ActiveStep | int | 0 | The zero-based index of the active step. Use with @bind-ActiveStep for two-way binding. |
| ActiveStepChanged | EventCallback<int> | — | Callback invoked when the active step index changes. |
| Orientation | Lumeo.Orientation | Horizontal | Layout direction. Values: Lumeo.Orientation.Horizontal, Vertical. |
| Linear | bool | true | When true, users cannot skip ahead past an incomplete step. |
| AllowStepClick | bool | false | When true, clicking a header step indicator navigates to that step (respects Linear). |
| OnFinish | EventCallback | — | Invoked when the user clicks Finish on the last step. |
| NextLabel | string | "Next" | Label for the Next button. |
| BackLabel | string | "Back" | Label for the Back button. |
| FinishLabel | string | "Finish" | Label for the Finish button (shown on the last step). |
StepperStep
| Property | Type | Default | Description |
|---|---|---|---|
| Title | string | "" | The step's title shown in the header indicator. |
| Description | string? | null | Optional subtitle shown beneath the title. |
| Optional | bool | false | When true, shows an "Optional" label below the description. |
| IsValid | Func<bool>? | null | When set, the Next button is disabled if this returns false (Linear mode gating). |
| IconContent | RenderFragment? | null | Custom icon for the step indicator (overrides number/check). |
| ChildContent | RenderFragment? | null | Body content for this step, displayed when the step is active. |