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

Steps Labels

The Stepper component allows you to set labels for the corresponding step indicators. You can define the desired labels through the Label parameter the StepperStep exposes. If you don't set value to the Label parameter, no label will be rendered for the step indicator.

Stepper component with indicators and labels. The result from the snippet below.

Indicators and Labels

@* Stepper with icon indicators and labels *@

<div style="width:500px">
    <TelerikStepper>
        <StepperSteps>
            <StepperStep Label="Personal Info" Icon="user"></StepperStep>
            <StepperStep Label="Education" Icon="dictionary-add"></StepperStep>
            <StepperStep Label="Experience" Icon="flip-vertical"></StepperStep>
            <StepperStep Label="Attachments" Icon="attachment"></StepperStep>
        </StepperSteps>
    </TelerikStepper>
</div>


Stepper component with indicators and only a couple labels defined. The result from the snippet below.

Some Labels

@* Stepper with icon indicators and only a couple labels *@

<div style="width:500px">
    <TelerikStepper>
        <StepperSteps>
            <StepperStep Label="Personal Info" Icon="user"></StepperStep>
            <StepperStep Icon="dictionary-add"></StepperStep>
            <StepperStep Icon="flip-vertical"></StepperStep>
            <StepperStep Label="Attachments" Icon="attachment"></StepperStep>
        </StepperSteps>
    </TelerikStepper>
</div>


Stepper component with only indicators and no labels. The result from the snippet below.

Only Indicators

@* Stepper with only indicators and no labels *@

<div style="width:500px">
    <TelerikStepper>
        <StepperSteps>
            <StepperStep Icon="user"></StepperStep>
            <StepperStep Icon="dictionary-add"></StepperStep>
            <StepperStep Icon="flip-vertical"></StepperStep>
            <StepperStep Icon="attachment"></StepperStep>
        </StepperSteps>
    </TelerikStepper>
</div>

See Also

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