Wizards

Multi-step wizard with a progress bar, Back / Next / Finish navigation, and optional per-step async validation. Designed to scale to 40+ steps — the bar fills proportionally with a Step X of Y counter.

Basic Wizard

Five steps with simple content. Last step shows Finish; clicking it fires OnFinish.

Step 1 of 5 20%

Welcome

Let's get your account set up in five easy steps.

This wizard will walk you through creating your account, setting up your profile, choosing a plan, reviewing your choices, and confirming everything is correct.

Click Next to begin.

Step Validation

The second step requires a non-empty project name before you can advance. Click Next without filling it in to see the validation message.

Step 1 of 3 33%

Introduction

This wizard demonstrates step validation. The next step requires input before you can continue.

Many Steps

Twelve steps — shows how the progress bar and counter scale cleanly at higher step counts.

Step 1 of 12 8%

Step 1: General

Complete section 1 of 12.

This is the content for step 1 of 12.

General configuration goes here.

Dark Mode

Same wizard with Theme="dark" forced on the component.

Step 1 of 3 33%

Environment

Choose your deployment environment.

An unhandled error has occurred. Reload x