Blazor Wizard Overview

The Wizard for Blazor component displays content in sequential, stepwise order. Each Wizard step can display any HTML or child components. The Wizard provides flexible layout, form integration and can prevent or allow users to skip steps.

The Wizard uses a Stepper component internally, so knowledge about the Stepper will be a plus, although not required.

Telerik UI for Blazor Ninja image

The Wizard component is part of Telerik UI for Blazor, a professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Creating Blazor Wizard

  1. Use the TelerikWizard tag
  2. Set the Value parameter to an int. The parameter supports one-way and two-way binding.
  3. Add some WizardStep instances inside a WizardSteps tag.
  4. Each WizardStep can define a Label and an Icon. Additional stepper image or text indicators are discussed later.

Basic Telerik Wizard

<TelerikWizard @bind-Value="@WizardValue">
    <WizardSteps>
        <WizardStep Label="Start" Icon="@SvgIcon.Gear">
            <Content>
                <p>Welcome to the Wizard!</p>
            </Content>
        </WizardStep>
        <WizardStep Label="Survey" Icon="@SvgIcon.Pencil">
            <Content>
                <p>The user is performing some actions...</p>
            </Content>
        </WizardStep>
        <WizardStep Label="Finish" Icon="SvgIcon.Check">
            <Content>
                <p>Thank you!</p>
            </Content>
        </WizardStep>
    </WizardSteps>
</TelerikWizard>

<p><strong>Wizard Value: @WizardValue</strong></p>

@code {
    int WizardValue { get; set; }
}

Stepper

The Wizard Stepper is the area, which shows the user the overall progress. The Stepper can also allow the user to skip steps, if this is enabled explicitly. Read more about the Wizard Stepper.

Content

The <Content> tag inside each WizardStep is a standard Blazor RenderFragment, which allows any child content.

Buttons

The Wizard Buttons enable the user to move forward and backward through the Wizard Steps. The Wizard provides the ability to use the built-in buttons or custom buttons. Read more about the Wizard Buttons.

Form Integration

The Wizard can contain a Form component with validation. In such scenarios, the Wizard Stepper can enhance the form's user experience by changing the step's icon to show the current form validation state.

Events

The Wizard component fires events when the current step changes or when the user completes all steps. Step changes can be cancelled.

Layout

The Wizard can display its Stepper on either side of the component - top (defaut) or bottom, left or right.

Wizard Parameters

Parameter Type and Default Value Description
Class string Renders a custom CSS class to the <div class="k-wizard"> element. Use it to override theme styles.
Height string Applies a height style in any supported unit.
ShowPager bool
(true)
Renders a "Step X of Y" label at the bottom of the component.
StepperPosition WizardStepperPosition enum
(Top)
Defines the Wizard layout and the Stepper position with regard to the step content.
Value int Sets the zero-based index of the current step. Supports two-way binding.
Width string Applies a width style in any supported unit.

WizardStepperSettings Parameters

See section General Stepper Settings.

WizardStep Parameters

See section Individual Stepper Settings.

Next Steps

See Also

In this article