New to Telerik UI for Blazor? Download free 30-day trial

Blazor Steps Overview

The Steps are the building blocks of the Stepper component. You can include the desired steps by adding a StepperStep tag for every step. The steps appearance can be configured through the features the StepperStep exposes - each step includes a visual indicator, you can define a label for the corresponding indicator and manage the step state and validity.

The whole rendering of the steps can also be customized with a Step Template.

In this article:

Step Parameters

The StepperStep exposes the following parameters which allow you to configure their appearance:


The visual indicators of the steps can include the content below.

Parameter Type and Default Value Description
Text string Specifies the step indicator text.
Icon object The icon which will be rendered inside the step indicator.


The steps can have one of the states below.

Parameter Type and Default Value Description
Disabled bool
Specifies if the step is disabled.
Optional bool
Specifies if the step is optional.

Other parameters

Parameter Type and Default Value Description
Label string Specifies the label text that will be rendered under the corresponding step indicator.
Valid bool?
Specifies if the step is valid or not.
Class string CSS class for the current step.

Steps Declaration

To include the desired steps for the Stepper component, you can either manually declare a StepperStep tag for every step or loop through your collection with steps data and render one StepperStep tag binding its parameters to the corresponding field of your model.

Loop through your collection and generate a StepperStep for every item in the collection.

@*Loop through a collection to create a step for all items in the collection. *@

<div style="width:700px">
            @foreach (var step in Steps)
                <StepperStep Label="@step.Label" Icon="@step.Icon"
                         Optional="@step.Optional" Disabled="@step.Disabled">

@code {
    List<StepModel> Steps { get; set; }

    protected override void OnInitialized()
        Steps = new List<StepModel>()
            new StepModel()
                Label = "Personal Info",
                Icon = FontIcon.User
            new StepModel()
                Label = "Education",
                Icon = FontIcon.Book,
                Disabled = true
            new StepModel()
                Label = "Experience",
                Icon = FontIcon.FlipVertical
            new StepModel()
                Label = "Attachments",
                Icon = FontIcon.FileAdd,
                Optional = true

    public class StepModel
        public string Label { get; set; }
        public FontIcon? Icon { get; set; }
        public bool Disabled { get; set; }
        public bool Optional { get; set; }

See Also

In this article