Stepper
Displays a sequence of steps with status indicators
SSR mode
Divergence from Blok
Only minor API differences: (1) we use ActiveStep (an int index) where Blok uses a per-step status: "completed" | "active" | "pending" field — Blok lets you mark individual steps independently; we infer the three states from the index relative to ActiveStep. (2) we don't yet expose a Size parameter (Blok has sm/default/lg); add this when needed.
Examples
Horizontal (default)
AccountCreate your account
2
ProfileSet up your profile
3
ReviewVerify your details
4
CompleteAll done
Step 2 of 4
Vertical
AccountCreate your account
2
ProfileSet up your profile
3
ReviewVerify your details
4
CompleteAll done
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| Stepper | Renders a sequence of steps with completed / active / pending circles. Step state is inferred from the item's index relative to ActiveStep. |
| StepperStep | Record describing a single step. Passed via Stepper.Steps; not a Blazor component. |
Stepper
Renders a sequence of steps with completed / active / pending circles. Step state is inferred from the item's index relative to ActiveStep.
| Property | Type | Required | Description |
|---|---|---|---|
| Steps | List<StepperStep> | Ordered list of steps. Each StepperStep has a Label and optional Description. | |
| ActiveStep | int | Zero-based index of the current step. Steps before it are completed, it is active, steps after it are pending. Default: 0. | |
| ActiveStepChanged | EventCallback<int> | Invoked when the active index changes. Use with @bind-ActiveStep for two-way binding. | |
| Orientation | StepperOrientation | Layout direction. Default: StepperOrientation.Horizontal. Other value: Vertical. | |
| ClassName | string? | Extra CSS classes appended to the stepper container. |
StepperStep
Record describing a single step. Passed via Stepper.Steps; not a Blazor component.
| Property | Type | Required | Description |
|---|---|---|---|
| Label | string | Primary label shown next to the circle. | |
| Description | string? | Optional secondary line shown beneath the label in muted text. |