Wizard Overview

The Wizard for Blazor component displays content in sequential, stepwise order. Each step of the Wizard has Content (RenderFragment), which can contain any type of HTML content including a Form component.

Telerik UI for Blazor Ninja image

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

The Wizard is separated into 3 main sections:

In this article:

Basics

To create a basic Telerik Wizard:

  1. Use the TelerikWizard tag
  2. under its WizardSteps tag, set and configure the desired WizardStep instances and include the desired content in their Content tag

Set up a basic Telerik Wizard. The result from the snippet below.

Basic Wizard

@* Telerik Wizard with its most common features *@

@using System.ComponentModel.DataAnnotations

@if (ShowWizard)
{
    <TelerikWizard @bind-Value="@Value" OnFinish="@OnFinishHandler" Width="700px">
        <WizardSteps>
            <WizardStep Label="Personal Details" Icon="user" OnChange="@OnRegistrationStepChange">
                <Content>
                    <TelerikForm Model="@UserModel"
                                 @ref="@RegisterForm">
                        <FormValidation>
                            <DataAnnotationsValidator></DataAnnotationsValidator>
                        </FormValidation>
                        <FormItems>
                            <FormItem LabelText="First Name*:" Field="@nameof(User.FirstName)"></FormItem>
                            <FormItem LabelText="Last Name*:" Field="@nameof(User.LastName)"></FormItem>
                            <FormItem Field="@nameof(User.Email)">
                                <Template>
                                    <label for="mail" class="k-label k-form-label">Email*:</label>
                                    <TelerikTextBox Id="mail" @bind-Value="@UserModel.Email" InputMode="email" PlaceHolder="example@domain.com"></TelerikTextBox>
                                    <TelerikValidationMessage For="@(() => UserModel.Email)"></TelerikValidationMessage>
                                </Template>
                            </FormItem>
                            <FormItem Field="@nameof(User.Password)">
                                <Template>
                                    <label for="pass" class="k-label k-form-label">Password*:</label>
                                    <TelerikTextBox Id="pass" @bind-Value="@UserModel.Password" Password="true"></TelerikTextBox>
                                    <TelerikValidationMessage For="@(() => UserModel.Password)"></TelerikValidationMessage>
                                </Template>
                            </FormItem>
                            <FormItem Field="@nameof(User.AcceptTerms)" />
                        </FormItems>
                        <FormButtons></FormButtons>
                    </TelerikForm>
                </Content>
            </WizardStep>
            <WizardStep Label="Attachments" Icon="paperclip">
                <Content>
                    @* No Upload functionality is included for brevity. If needed, it can be additionally set up. *@
                    <TelerikUpload AllowedExtensions="@( new List<string>() { ".pdf", ".docx" } )" />
                </Content>
            </WizardStep>
            <WizardStep Label="Confirmation" Icon="check">
                <Content>
                    <h2>Registration completed.</h2>
                </Content>
            </WizardStep>
        </WizardSteps>
    </TelerikWizard>
}

@code {

    public bool ShowWizard { get; set; } = true;

    public int Value { get; set; }

    public TelerikForm RegisterForm { get; set; }
    public User UserModel { get; set; } = new User();

    public void OnRegistrationStepChange(WizardStepChangeEventArgs args)
    {
        var isFormValid = RegisterForm.IsValid();
        if (!isFormValid)
        {
            args.IsCancelled = true;
        }
    }

    public void OnFinishHandler()
    {
        ShowWizard = false;
    }

    public class User
    {
        [Required]
        public string FirstName { get; set; } = "John";

        [Required]
        public string LastName { get; set; } = "Smith";

        [Required]
        public string Email { get; set; } = "email@domain.com";

        [MinLength(3, ErrorMessage = "The password should be at least 3 characters.")]
        [Required]
        public string Password { get; set; }

        public DateTime? BirthDate { get; set; }

        [Range(typeof(bool), "true", "true", ErrorMessage = "You must agree with the terms.")]
        [Display(Name = "Accept Terms and Conditions")]
        public bool AcceptTerms { get; set; }
    }
}

Component namespace and reference

@* Telerik Wizard namespace and reference *@

<TelerikWizard @ref="@MyWizardRef">
    <WizardSteps>
        <WizardStep Text="1">
            <Content>
                <h2>Content for Wizard Step 1</h2>
            </Content>
        </WizardStep>
        <WizardStep Text="2">
            <Content>
                <h2>Content for Wizard Step 2</h2>
            </Content>
        </WizardStep>
    </WizardSteps>
</TelerikWizard>

@code{

    Telerik.Blazor.Components.TelerikWizard MyWizardRef { get; set; }

}

Features

  • StepperPosition - WizardStepperPosition - Specify where the stepper is rendered against the wizard content. The default is Top. See the Layout article for more information.

  • Value - int - Specifies the current step index.

  • Width - string - Specifies the width of the Wizard.

  • Height - string - Specifies the height of the Wizard.

  • ShowPager - bool - Specifies if the pager text should be shown.

  • Class - CSS class that will be rendered on the main wrapping element of the Wizard.

See Also

In this article
Not finding the help you need? Improve this article