Stepper
A stateful multi-step wizard with navigation, per-step validation gating, and accessible step indicators.
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.
Pick a value to see it applied live.
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. |
| Orientation | StepperOrientation | Horizontal | Layout direction. Values: Stepper.StepperOrientation.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. |