RadzenSteps Class

A wizard-style steps component that guides users through a multi-step process with numbered navigation. RadzenSteps displays a visual progress indicator and manages sequential navigation through each step, ideal for forms, checkout flows, or setup wizards. Provides a structured way to break complex processes into manageable sequential stages. Features numbered circles showing current/completed/upcoming steps for visual progress, Next/Previous buttons for moving between steps or clicking on step numbers, optional form validation integration to prevent advancing with invalid data, CanChange event to control when users can move between steps, navigation to specific steps via SelectedIndex binding, and optional built-in Next/Previous buttons or use your own custom navigation. Each step is defined using RadzenStepsItem components. Use the CanChange event to validate data before allowing step transitions. Integrates with Blazor EditContext for form validation.

Inheritance

Object

ComponentBase

RadzenComponent

RadzenSteps

Implements

IComponent

IHandleEvent

IHandleAfterRender

Namespace: Radzen.Blazor

Assembly: Radzen.Blazor.dll

Syntax

public class RadzenSteps : RadzenComponent, IComponent, IHandleEvent, IHandleAfterRender

Examples

Basic wizard with steps:

<RadzenSteps @bind-SelectedIndex=@currentStep>
    <Steps>
        <RadzenStepsItem Text="Personal Info">
            <RadzenTextBox @bind-Value=@name Placeholder="Name" />
            <RadzenTextBox @bind-Value=@email Placeholder="Email" />
        </RadzenStepsItem>
        <RadzenStepsItem Text="Address">
            <RadzenTextBox @bind-Value=@street Placeholder="Street" />
            <RadzenTextBox @bind-Value=@city Placeholder="City" />
        </RadzenStepsItem>
        <RadzenStepsItem Text="Review">
            Review and submit...
        </RadzenStepsItem>
    </Steps>
</RadzenSteps>

Steps with validation and custom buttons:

<RadzenSteps ShowStepsButtons="false" CanChange=@OnCanChange>
    <Steps>
        <RadzenStepsItem Text="Step 1">Content...</RadzenStepsItem>
        <RadzenStepsItem Text="Step 2">Content...</RadzenStepsItem>
    </Steps>
</RadzenSteps>
<RadzenStack Orientation="Orientation.Horizontal" Gap="1rem">
    <RadzenButton Text="Previous" Click=@PrevStep />
    <RadzenButton Text="Next" Click=@NextStep />
</RadzenStack>

Constructors

RadzenStepslink

A wizard-style steps component that guides users through a multi-step process with numbered navigation. RadzenSteps displays a visual progress indicator and manages sequential navigation through each step, ideal for forms, checkout flows, or setup wizards. Provides a structured way to break complex processes into manageable sequential stages. Features numbered circles showing current/completed/upcoming steps for visual progress, Next/Previous buttons for moving between steps or clicking on step numbers, optional form validation integration to prevent advancing with invalid data, CanChange event to control when users can move between steps, navigation to specific steps via SelectedIndex binding, and optional built-in Next/Previous buttons or use your own custom navigation. Each step is defined using RadzenStepsItem components. Use the CanChange event to validate data before allowing step transitions. Integrates with Blazor EditContext for form validation.

Declaration
public RadzenSteps()

Properties

AllowStepSelectlink

Declaration
public bool AllowStepSelect { get; set; }
Property Value
Type Description
bool

CanChangelink

A callback that will be invoked when the user tries to change the step. Invoke the PreventDefault method to prevent this change.

Declaration
public EventCallback<StepsCanChangeEventArgs> CanChange { get; set; }
Property Value
Type Description
EventCallback<StepsCanChangeEventArgs>A callback that will be invoked when the user tries to change the step. Invoke the PreventDefault method to prevent this change.
Examples
<RadzenSteps CanChange=@OnCanChange>
</RadzenSteps>
@code {
 void OnCanChange(RadzenStepsCanChangeEventArgs args)
 {
    args.PreventDefault();
 }
}

Changelink

Gets or sets the change callback.

Declaration
public EventCallback<int> Change { get; set; }
Property Value
Type Description
EventCallback<int>Gets or sets the change callback.

EditContextlink

Gets or sets the edit context.

Declaration
public Forms.EditContext EditContext { get; set; }
Property Value
Type Description
Forms.EditContextGets or sets the edit context.

NextAriaLabellink

Gets the next button aria-label attribute.

Declaration
public string NextAriaLabel { get; }
Property Value
Type Description
stringGets the next button aria-label attribute.

NextTextlink

Gets or sets the next button text.

Declaration
public string NextText { get; set; }
Property Value
Type Description
stringGets or sets the next button text.

NextTitlelink

Gets or sets the next button title attribute.

Declaration
public string NextTitle { get; set; }
Property Value
Type Description
stringGets or sets the next button title attribute.

PreviousAriaLabellink

Gets the previous button aria-label attribute.

Declaration
public string PreviousAriaLabel { get; }
Property Value
Type Description
stringGets the previous button aria-label attribute.

PreviousTextlink

Gets or sets the previous button text.

Declaration
public string PreviousText { get; set; }
Property Value
Type Description
stringGets or sets the previous button text.

PreviousTitlelink

Gets or sets the previous button title attribute.

Declaration
public string PreviousTitle { get; set; }
Property Value
Type Description
stringGets or sets the previous button title attribute.

SelectedIndexlink

Gets or sets the selected index.

Declaration
public int SelectedIndex { get; set; }
Property Value
Type Description
intGets or sets the selected index.

SelectedIndexChangedlink

Gets or sets the selected index changed callback.

Declaration
public EventCallback<int> SelectedIndexChanged { get; set; }
Property Value
Type Description
EventCallback<int>Gets or sets the selected index changed callback.

ShowStepsButtonslink

Gets or sets whether to display the built-in Next and Previous navigation buttons below the step content. When false, you must provide your own navigation buttons using NextStep() and PrevStep() methods.

Declaration
public bool ShowStepsButtons { get; set; }
Property Value
Type Description
boolGets or sets whether to display the built-in Next and Previous navigation buttons below the step content. When false, you must provide your own navigation buttons using NextStep() and PrevStep() methods.

Stepslink

Gets or sets the steps.

Declaration
public RenderFragment Steps { get; set; }
Property Value
Type Description
RenderFragmentGets or sets the steps.

StepsCollectionlink

Gets the steps collection.

Declaration
public IList<RadzenStepsItem> StepsCollection { get; }
Property Value
Type Description
IList<RadzenStepsItem>Gets the steps collection.

Methods

AddSteplink

Adds the step.

Declaration
public void AddStep(RadzenStepsItem step)
Parameters
Type Name Description
RadzenStepsItem step The step.

BuildRenderTreelink

Declaration
protected override void BuildRenderTree(Rendering.RenderTreeBuilder __builder)
Parameters
Type Name Description
Rendering.RenderTreeBuilder __builder

GetComponentCssClasslink

Declaration
protected override string GetComponentCssClass()
Returns
Type Description
string

IsSelectedlink

Determines whether the specified index is selected.

Declaration
protected bool IsSelected(int index, RadzenStepsItem step)
Parameters
Type Name Description
int index The index.
RadzenStepsItem step The step.
Returns
Type Description
booltrue if the specified index is selected; otherwise, false.

NextSteplink

Programmatically navigates to the next visible step in the sequence. If already at the last step, this method does nothing. Respects CanChange validation.

Declaration
public Task NextStep()
Returns
Type Description
TaskA task representing the asynchronous navigation operation.

PrevSteplink

Programmatically navigates to the previous visible step in the sequence. If already at the first step, this method does nothing. Respects CanChange validation.

Declaration
public Task PrevStep()
Returns
Type Description
TaskA task representing the asynchronous navigation operation.

RemoveSteplink

Removes the step.

Declaration
public void RemoveStep(RadzenStepsItem item)
Parameters
Type Name Description
RadzenStepsItem item The item.

SetParametersAsynclink

Declaration
public override Task SetParametersAsync(ParameterView parameters)
Parameters
Type Name Description
ParameterView parameters
Returns
Type Description
Task
An error has occurred. This app may no longer respond until reloaded. Reload 🗙