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 80 native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

In this article:

Basics

To use a Telerik Stepper for Blazor:

  1. Use the TelerikStepper tag

  2. Under its StepperSteps tag include and configure the desired Steps

Simple setup of a Stepper component. The result from the snippet below.

Simple Stepper

@* 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;
}

Features

The Stepper provides the following features:

  • Orientation - StepperOrientation - defines the orientation of the Stepper. You can read more on how to configure it in the Orientation article.

  • Value - int- defines the current step index.

  • Linear - bool - enables/disables linear flow.

  • StepType - StepperStepType - defines the display mode of the Stepper. You can read more on how to configure it in the Display modes article.

See Also

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