Layout

TwStepper

TwStepper is a Blazor stepper for multi-step flows. Bind ActiveStepIndex, set Orientation, Linear and Color, and give each step a Label and Description.

Last updated 24 September 2026

Basic Stepper

Add TwStep children to a TwStepper to declare each step, and bind ActiveStepIndex to control which one is active. Wire your own "Back"/"Next" buttons to a component reference's PreviousStep() and NextStep() methods, as shown below. Below the "sm" breakpoint the step row automatically collapses into a compact progress bar with a "Step X of N" label, so try resizing your browser to see it adapt.

Enter your email address and choose a password.

Razor

<TwStepper @ref="basicStepper" @bind-ActiveStepIndex="basicActiveStep" AriaLabel="Checkout progress">
    <TwStep Label="Account" Description="Create your login">
        <p>Enter your email address and choose a password.</p>
    </TwStep>
    <TwStep Label="Address" Description="Where to ship">
        <p>Enter the shipping address for your order.</p>
    </TwStep>
    <TwStep Label="Review" Description="Confirm and pay">
        <p>Review your order details before confirming payment.</p>
    </TwStep>
</TwStepper>

<div class="flex gap-2 mt-4">
    <TwButton Label="Back" Variant="ButtonVariant.Outlined" Color="Color.Primary" Disabled="@(basicActiveStep <= 0)" OnClick="@(() => basicStepper.PreviousStep())" />
    <TwButton Label="Next" Disabled="@(basicActiveStep >= 2)" Color="Color.Primary" OnClick="@(() => basicStepper.NextStep())" Variant="ButtonVariant.Filled" />
</div>

CSHARP

@code {
    private TwStepper basicStepper = null!;
    private int basicActiveStep;
}

Validating a Step

Pass your own validation Task to a "Next" button's click handler and only call NextStep when it passes - the stepper doesn't need to know anything about your validation logic.

Email address

Please enter a valid email address.

Razor

<TwStepper @ref="validatedStepper" @bind-ActiveStepIndex="validatedActiveStep" Linear AriaLabel="Signup progress">
    <TwStep Label="Email">
        <TwTextfield Label="Email address" @bind-Value="signupEmail" Placeholder="Enter your email address" AriaLabel="Email address" Invalid="@emailInvalid" ErrorMessage="Please enter a valid email address." />
    </TwStep>
    <TwStep Label="Done">
        <p>Thanks, @signupEmail is confirmed!</p>
    </TwStep>
</TwStepper>

<div class="flex gap-2 mt-4">
    <TwButton Label="Back" Variant="ButtonVariant.Outlined" Color="Color.Primary" Disabled="@(validatedActiveStep <= 0)" OnClick="@(() => validatedStepper.PreviousStep())" />
    <TwButton Label="Next" Disabled="@(validatedActiveStep >= 1)" Color="Color.Primary" OnClick="ValidateAndContinue" Variant="ButtonVariant.Filled" />
</div>

CSHARP

@code {
    private TwStepper validatedStepper = null!;
    private int validatedActiveStep;
    private string signupEmail = string.Empty;
    private bool emailInvalid;
    
    private Task ValidateAndContinue()
    {
        emailInvalid = string.IsNullOrWhiteSpace(signupEmail) || !signupEmail.Contains('@');
        return emailInvalid ? Task.CompletedTask : validatedStepper.NextStep();
    }
}

Non-Linear Stepper

Set Linear="false" to let users jump straight to any non-disabled step by clicking it, instead of only being able to reach steps they've already visited.

Razor

<TwStepper @bind-ActiveStepIndex="nonLinearActiveStep" Linear="false" AriaLabel="Non-linear progress">
    <TwStep Label="Step 1" />
    <TwStep Label="Step 2" />
    <TwStep Label="Step 3" />
    <TwStep Label="Step 4" />
</TwStepper>

Disabled Step

Set Disabled on a TwStep to prevent it from being navigated to, whether by clicking or via NextStep/PreviousStep (which both skip over it).

Razor

<TwStepper @bind-ActiveStepIndex="disabledActiveStep" Linear="false" AriaLabel="Progress with a disabled step">
    <TwStep Label="Details" />
    <TwStep Label="Shipping" Disabled />
    <TwStep Label="Payment" />
</TwStepper>

Vertical Stepper

Set Orientation="StepperOrientation.Vertical" to stack steps top-to-bottom, with each step's content shown inline beneath its label while it's active.

Razor

<TwStepper @ref="verticalStepper" @bind-ActiveStepIndex="verticalActiveStep" Orientation="StepperOrientation.Vertical" AriaLabel="Onboarding progress">
    <TwStep Label="Create account" Description="A few basic details">
        <p class="mb-3">Choose a username and password to get started.</p>
        <TwButton Label="Continue" OnClick="@(() => verticalStepper.NextStep())" Dense />
    </TwStep>
    <TwStep Label="Verify email" Description="Optional">
        <p class="mb-3">We've sent a confirmation link to your inbox.</p>
        <div class="flex gap-2">
            <TwButton Label="Back" Variant="ButtonVariant.Outlined" Color="Color.Primary" OnClick="@(() => verticalStepper.PreviousStep())" Dense />
            <TwButton Label="Continue" OnClick="@(() => verticalStepper.NextStep())" Color="Color.Primary" Dense Variant="ButtonVariant.Filled" />
        </div>
    </TwStep>
    <TwStep Label="Done">
        <p>You're all set!</p>
    </TwStep>
</TwStepper>

CSHARP

@code {
    private TwStepper verticalStepper = null!;
    private int verticalActiveStep;
}

Colored Stepper

Set Color to change the accent used for the active and completed step indicators and connectors.

Razor

<TwStepper @bind-ActiveStepIndex="coloredActiveStep" Linear="false" Color="Color.Success" AriaLabel="Success-colored progress">
    <TwStep Label="Step 1" />
    <TwStep Label="Step 2" />
    <TwStep Label="Step 3" />
</TwStepper>

Theme Configuration

Styling is controlled by TwBlazorTheme.Components (a TwStepperTheme), configured via the AddTwBlazor() options callback described on the Get Started page. Every property is a set of Tailwind classes, so changes are picked up by your own Tailwind build.

Property	Type	Controls
`HorizontalList`	string
`VerticalList`	string
`Step`	string
`VerticalStep`	string
`VerticalIndicatorColumn`	string
`VerticalContentColumn`	string
`Connector`	string
`VerticalConnector`	string
`ConnectorNeutral`	string
`Circle`	string
`CircleUpcoming`	string
`CircleDisabled`	string
`CircleClickable`	string
`CircleIcon`	string
`Label`	string
`LabelUpcoming`	string
`Description`	string
`Content`	string
`VerticalContent`	string
`MobileContainer`	string
`MobileLabel`	string
`MobileProgressLabel`	string

Full reference: TwStepperTheme on the API docs.