# Stepper

Source: https://lumeo.nativ.sh/components/stepper

# 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.

Preview Code

Basic Stepper

Back

Next

Copy Code

Preview Code

With Optional Step

Back

Next

Copy Code

Preview Code

Vertical Orientation

Back

Next

Copy Code

Preview Code

Orientation — interactive

Pick a value to see it applied live.

HorizontalVertical

Back

Next

Copy Code

## 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.

## Related Components

-   [Steps](/components/steps) — Display-only step indicator for showing progress in a flow.
-   [Tabs](/components/tabs) — Use when sections are independent and can be accessed in any order.
-   [Progress](/components/progress) — A linear bar for showing overall completion percentage.