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.

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

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

• Explore the Wizard Stepper settings
• Handle Wizard events
• Integrate the Wizard with a Form

See Also

• Live Demos: Wizard Overview