Lumeo

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
EmailRequired to continue
Done

The Next button stays disabled until you type something.

OneJump freely
TwoNon-linear
Three

Click any step header to navigate directly.

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

StepperStep

  • Steps — Display-only step indicator for showing progress in a flow.
  • Tabs — Use when sections are independent and can be accessed in any order.
  • Progress — A linear bar for showing overall completion percentage.