Blazor Stepper Overview

The Stepper for Blazor is a component that renders a path formed by a sequence of logical steps towards a bigger action. The Stepper indicates the user’s progress within this action by showing the steps left for them to complete it. It makes the user experience less overwhelming as it breaks the long process into smaller parts.

The Stepper provides several features out of the box, including the ability to define the appearance of each step, validation for the steps, strict linear flow and step template to make the it fit any design requirements.

Telerik UI for Blazor Ninja image

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

Creating Blazor Stepper

  1. Add the TelerikStepper tag to add the component to your razor page.

  2. Set the Value parameter (int) to define the current step index. It supports one-way and two-way binding.

  3. Add StepperStep instances inside the StepperSteps tag.

  4. (optional) Set the Icon and Label StepperStep properties.

Simple setup of a Stepper component.

@* Simple Stepper setup. *@

<div style="width:700px">
    <TelerikStepper @bind-Value="@CurrentStepIndex">
        <StepperSteps>
            <StepperStep Icon="cart" Label="Cart"></StepperStep>
            <StepperStep Icon="marker-pin-target" Label="Delivery Address"></StepperStep>
            <StepperStep Icon="dollar" Label="Payment Method"></StepperStep>
            <StepperStep Icon="preview" Label="Preview"></StepperStep>
            <StepperStep Icon="track-changes-accept" Label="Finish Order"></StepperStep>
        </StepperSteps>
    </TelerikStepper>
</div>

@code {
    public int CurrentStepIndex { get; set; } = 2;
}

Steps

The Steps are the building blocks of the Stepper component. Include the desired steps by adding a StepperStep tag for every step. Then, configure each StepperStep appearance via its parameters. Read more about the Blazor Steps configuration.

Orientation

The Stepper component provides horizontal and vertical orientations. Read more about the Blazor Stepper orientation.

Display Modes

The Stepper steps can display labels and icons. Read more about the Blazor Stepper display modes.

Linear Flow

By default, the user can select any step in the Stepper component and go to it directly. This behavior can be changed with the Linear parameter, so that the user goes through the steps sequentially. Read more about the Blazor Stepper linear flow.

Templates

You can use the functionality of the built-in templates and customize what is rendered as steps. Read more about the Blazor Stepper templates.

Events

The Blazor Stepper generates events that you can handle and further customize its behavior. Read more about the Blazor Stepper events.

Stepper Parameters

The Blazor Stepper provides various parameters that allow you to configure the component:

Parameter Type and Default Value Description
Value int Defines the current step index.
Orientation StepperOrientation enum
(Horizontal)
Defines the orientation of the Stepper. You can read more on how to configure it in the Orientation article.
Linear bool Enables/disables linear flow.
StepType StepperStepType enum
(Steps)
Defines the display mode of the Stepper. You can read more on how to configure it in the Display modes article.

Next Steps

See Also

In this article