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 Description
Text string Specifies the step indicator text.
Icon object The icon which will be rendered inside the step indicator. The parameter can accept properties of the static SvgIcon class, members of the FontIcon enum, or strings for custom icons.


The steps can have one of the states below.

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

Other parameters

Parameter Type 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 {
    private List<StepModel> Steps { get; set; }

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


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

See Also

In this article