Table of Contents

Class TwStepper

Namespace
TwBlazor.Components
Assembly
TwBlazor.dll

Represents a step-by-step progress indicator for multi-step flows (e.g. checkout, onboarding wizards), showing which steps are completed, which is active, and which are still upcoming.

public class TwStepper : TwBlazorComponentBase, IComponent, IHandleEvent, IHandleAfterRender, ITwComponent
Inheritance
TwStepper
Implements
Inherited Members

Remarks

Add TwStep children to declare each step. On Horizontal (the default), the full step row is only shown from the "sm" breakpoint up; below it, the stepper renders a compact progress bar with a "Step X of N" label instead, so the control stays usable on narrow screens without steps wrapping or overflowing. Vertical stacks steps top-to-bottom and needs no such collapse, since it never overflows horizontally.

Constructors

TwStepper() 

public TwStepper()

Properties

ActiveStep

Gets the currently active step, or null if ActiveStepIndex is out of range (e.g. before any steps have registered).

public TwStep? ActiveStep { get; }

Property Value

TwStep

ActiveStepIndex

Gets or sets the index (zero-based) of the currently active step.

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

Property Value

int

ActiveStepIndexChanged

Gets or sets the callback invoked when the active step changes, enabling two-way binding via @bind-ActiveStepIndex.

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

Property Value

EventCallback<int>

ChildContent

Gets or sets the TwStep children declaring each step.

[Parameter]
public required RenderFragment ChildContent { get; set; }

Property Value

RenderFragment

Color

Gets or sets the accent color used for the active and completed step indicators and connectors.

[Parameter]
public Color? Color { get; set; }

Property Value

Color?

Remarks

If not set, uses the theme's default primary color.

IsFirstStep

Gets whether the active step is the first step.

public bool IsFirstStep { get; }

Property Value

bool

IsLastStep

Gets whether the active step is the last step.

public bool IsLastStep { get; }

Property Value

bool

Linear

Gets or sets whether steps must be completed in order.

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

Property Value

bool

Remarks

When true (the default), clicking a step's indicator is only allowed for the active step or one before it - i.e. a step the user can already see is completed - preventing the user from skipping ahead of steps whose prerequisites haven't been completed. Set to false to let the user freely jump to any non-disabled step by clicking it. This only restricts user-initiated clicks - GoToStep(int) can always move programmatically to any non-disabled step regardless of this setting.

Orientation

Gets or sets the layout direction of the stepper.

[Parameter]
public StepperOrientation Orientation { get; set; }

Property Value

StepperOrientation

Methods

BuildRenderTree(RenderTreeBuilder)

Renders the component to the supplied RenderTreeBuilder.

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

__builder RenderTreeBuilder

GoToStep(int)

Moves directly to the step at index, if it exists, isn't disabled, and isn't already active.

public Task GoToStep(int index)

Parameters

index int

Returns

Task

Remarks

Unlike clicking a step's indicator, this always succeeds for any in-range, non-disabled step, regardless of Linear - call this from your own "Next"/"Back" buttons, or after your own validation, rather than to bypass Linear on the user's behalf from a step click handler.

NextStep()

Advances to the next enabled step, if there is one.

public Task NextStep()

Returns

Task

PreviousStep()

Moves back to the previous enabled step, if there is one.

public Task PreviousStep()

Returns

Task
Edit this page