Class RadzenSteps

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

IDisposable

Inherited Members

RadzenComponent.OnMouseEnter()

RadzenComponent.OnMouseLeave()

RadzenComponent.OnContextMenu(MouseEventArgs)

RadzenComponent.GetCssClass()

RadzenComponent.GetId()

RadzenComponent.Debounce(Func<Task>, int)

RadzenComponent.OnInitialized()

RadzenComponent.OnAfterRenderAsync(bool)

RadzenComponent.RaiseContextMenu(MouseEventArgs)

RadzenComponent.RaiseMouseEnter()

RadzenComponent.AddContextMenu()

RadzenComponent.RaiseMouseLeave()

RadzenComponent.Dispose()

RadzenComponent.Attributes

RadzenComponent.Element

RadzenComponent.MouseEnter

RadzenComponent.MouseLeave

RadzenComponent.ContextMenu

RadzenComponent.Culture

RadzenComponent.DefaultCulture

RadzenComponent.Style

RadzenComponent.Visible

RadzenComponent.UniqueID

RadzenComponent.JSRuntime

RadzenComponent.IsJSRuntimeAvailable

RadzenComponent.Reference

RadzenComponent.CurrentStyle

ComponentBase.OnInitializedAsync()

ComponentBase.OnParametersSet()

ComponentBase.OnParametersSetAsync()

ComponentBase.StateHasChanged()

ComponentBase.ShouldRender()

ComponentBase.OnAfterRender(bool)

ComponentBase.InvokeAsync(Action)

ComponentBase.InvokeAsync(Func<Task>)

ComponentBase.DispatchExceptionAsync(Exception)

object.GetType()

object.MemberwiseClone()

object.ToString()

object.Equals(object)

object.Equals(object, object)

object.ReferenceEquals(object, object)

object.GetHashCode()

Namespace: Radzen.Blazor

Assembly: Radzen.Blazor.dll

Syntax

public class RadzenSteps : RadzenComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposable

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

RadzenSteps()

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()

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>

Properties

AllowStepSelect

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

[Parameter]
public bool AllowStepSelect { get; set; }

Property Value

Type	Description
bool	true user can jump to any step if enabled; false user can change steps only with step buttons (previous/next).

CanChange

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

Declaration

[Parameter]
public EventCallback<StepsCanChangeEventArgs> CanChange { get; set; }

Property Value

Type	Description
EventCallback<StepsCanChangeEventArgs>

Examples

<RadzenSteps CanChange=@OnCanChange>
</RadzenSteps>
@code {
 void OnCanChange(RadzenStepsCanChangeEventArgs args)
 {
    args.PreventDefault();
 }
}

Change

Gets or sets the change callback.

Declaration

[Parameter]
public EventCallback<int> Change { get; set; }

Property Value

Type	Description
EventCallback<int>	The change callback.

EditContext

Gets or sets the edit context.

Declaration

[CascadingParameter]
public EditContext EditContext { get; set; }

Property Value

Type	Description
EditContext	The edit context.

NextAriaLabel

Gets the next button aria-label attribute.

Declaration

public string NextAriaLabel { get; }

Property Value

Type	Description
string	The next button aria-label attribute.

NextText

Gets or sets the next button text.

Declaration

[Parameter]
public string NextText { get; set; }

Property Value

Type	Description
string	The next button text.

NextTitle

Gets or sets the next button title attribute.

Declaration

[Parameter]
public string NextTitle { get; set; }

Property Value

Type	Description
string	The next button title attribute.

PreviousAriaLabel

Gets the previous button aria-label attribute.

Declaration

public string PreviousAriaLabel { get; }

Property Value

Type	Description
string	The previous button aria-label attribute.

PreviousText

Gets or sets the previous button text.

Declaration

[Parameter]
public string PreviousText { get; set; }

Property Value

Type	Description
string	The previous button text.

PreviousTitle

Gets or sets the previous button title attribute.

Declaration

[Parameter]
public string PreviousTitle { get; set; }

Property Value

Type	Description
string	The previous button title attribute.

SelectedIndex

Gets or sets the selected index.

Declaration

[Parameter]
public int SelectedIndex { get; set; }

Property Value

Type	Description
int	The selected index.

SelectedIndexChanged

Gets or sets the selected index changed callback.

Declaration

[Parameter]
public EventCallback<int> SelectedIndexChanged { get; set; }

Property Value

Type	Description
EventCallback<int>	The selected index changed callback.

ShowStepsButtons

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

[Parameter]
public bool ShowStepsButtons { get; set; }

Property Value

Type	Description
bool	true to show built-in navigation buttons; false to use custom navigation. Default is true.

Steps

Gets or sets the steps.

Declaration

[Parameter]
public RenderFragment Steps { get; set; }

Property Value

Type	Description
RenderFragment	The steps.

StepsCollection

Gets the steps collection.

Declaration

public IList<RadzenStepsItem> StepsCollection { get; }

Property Value

Type	Description
IList<RadzenStepsItem>	The steps collection.

Methods

AddStep(RadzenStepsItem)

Adds the step.

Declaration

public void AddStep(RadzenStepsItem step)

Parameters

Type	Name	Description
RadzenStepsItem	step	The step.

BuildRenderTree(RenderTreeBuilder)

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

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
RenderTreeBuilder	__builder

Overrides

ComponentBase.BuildRenderTree(RenderTreeBuilder)

GetComponentCssClass()

Gets the component CSS class.

Declaration

protected override string GetComponentCssClass()

Returns

Type	Description
string

Overrides

RadzenComponent.GetComponentCssClass()

IsSelected(int, RadzenStepsItem)

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
bool	true if the specified index is selected; otherwise, false.

NextStep()

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
Task	A task representing the asynchronous navigation operation.

PrevStep()

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
Task	A task representing the asynchronous navigation operation.

RemoveStep(RadzenStepsItem)

Removes the step.

Declaration

public void RemoveStep(RadzenStepsItem item)

Parameters

Type	Name	Description
RadzenStepsItem	item	The item.

SetParametersAsync(ParameterView)

Called by the Blazor runtime when parameters are set.

Declaration

public override Task SetParametersAsync(ParameterView parameters)

Parameters

Type	Name	Description
ParameterView	parameters	The parameters.

Returns

Type	Description
Task

Overrides

RadzenComponent.SetParametersAsync(ParameterView)

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable