Blazorise Step component

The Step component displays progress through numbered steps.

Similar to Tabs component, the step component have the same structure and usage.

  • <Steps> container for Step items.

    • <Items> collection of step items.

      • <Step> individual step item, which can be clicked to navigate to the step content.

    • <Content> container for step content.

      • <StepPanel> individual step content, which is displayed when the step item is clicked.

The Steps component is container for Step items. The Name of each step item should match the Name of a step panel(if panels are used).

  • <StepsContent> container for step panels
    • <StepPanel> container for step content

The step content container is used to hold step panels. Each content pane also has a unique Name, which is targeted by a link in the step-strip.

Most of the time you will only need to use Steps component as it is crafted to hold both clickable step items and step content. Only in the advanced scenario where the content will be separated from the step items you will need to use StepsContent component.

Examples

Basic

Content for step 1. 
<Steps SelectedStep="@selectedStep" SelectedStepChanged="@OnSelectedStepChanged">
    <Items>
        <Step Name="step1">Create campaign settings</Step>
        <Step Name="step2">Create an ad group</Step>
        <Step Name="step3">Create an add</Step>
        <Step Name="step4">
            <Marker>
                <Icon Name="IconName.Flag" />
            </Marker>
            <Caption>
                Finish
            </Caption>
        </Step>
    </Items>
    <Content>
        <StepPanel Name="step1">
            Content for step 1.
        </StepPanel>
        <StepPanel Name="step2">
            Content for step 2.
        </StepPanel>
        <StepPanel Name="step3">
            Content for step 3.
        </StepPanel>
        <StepPanel Name="step4">
            Content for finish.
        </StepPanel>
    </Content>
</Steps>

@code{
    string selectedStep = "step1";

    private Task OnSelectedStepChanged( string name )
    {
        selectedStep = name;

        return Task.CompletedTask;
    }
}

AlignmentNew

Use StepAlignment.Start, Center, or End to group horizontal steps together. Choose SpaceBetween to spread the steps out, or Justified to distribute equal space around each step. The markers and captions keep their usual sizes. Default keeps the provider's usual layout.
Grouped at the start
Space between items
Equal space for each item
<Heading Size="HeadingSize.Is6">Grouped at the start</Heading>
<Steps StepAlignment="StepAlignment.Start" SelectedStep="payment" AriaLabel="Compact checkout progress">
    <Step Name="delivery" Completed>Delivery details</Step>
    <Step Name="payment">Payment</Step>
    <Step Name="review">Review order</Step>
</Steps>

<Heading Size="HeadingSize.Is6" Margin="Margin.Is4.FromTop">Space between items</Heading>
<Steps StepAlignment="StepAlignment.SpaceBetween" SelectedStep="payment" AriaLabel="Spread checkout progress">
    <Step Name="delivery" Completed>Delivery details</Step>
    <Step Name="payment">Payment</Step>
    <Step Name="review">Review order</Step>
</Steps>

<Heading Size="HeadingSize.Is6" Margin="Margin.Is4.FromTop">Equal space for each item</Heading>
<Steps StepAlignment="StepAlignment.Justified" SelectedStep="payment" AriaLabel="Equal-width checkout progress">
    <Step Name="delivery" Completed>Delivery details</Step>
    <Step Name="payment">Payment</Step>
    <Step Name="review">Review order</Step>
</Steps>

PlacementNew

Use StepPosition.Start or StepPosition.End to place steps on either side of their content. StepPosition.Top is the default, and StepPosition.Bottom places the steps below the content. The step list takes the space it needs, and the content fills the remaining width. Use the up and down arrow keys to move between vertical steps.
Payment method

Select how you would like to pay for your order.

Your delivery details are complete. Review your order when you are ready to continue.

<Steps @bind-SelectedStep="selectedStep" StepPosition="StepPosition.Start" AriaLabel="Checkout progress">
    <Items>
        <Step Name="delivery" Completed>Delivery details</Step>
        <Step Name="payment">Payment method</Step>
        <Step Name="review">Review your order</Step>
    </Items>
    <Content>
        <StepPanel Name="delivery" Padding="Padding.Is3">
            <Heading Size="HeadingSize.Is5">Delivery details</Heading>
            <Paragraph>Choose where your order should be delivered.</Paragraph>
            <Paragraph Margin="Margin.Is0.FromBottom">You can return to this step to check your address before placing the order.</Paragraph>
        </StepPanel>
        <StepPanel Name="payment" Padding="Padding.Is3">
            <Heading Size="HeadingSize.Is5">Payment method</Heading>
            <Paragraph>Select how you would like to pay for your order.</Paragraph>
            <Paragraph Margin="Margin.Is0.FromBottom">Your delivery details are complete. Review your order when you are ready to continue.</Paragraph>
        </StepPanel>
        <StepPanel Name="review" Padding="Padding.Is3">
            <Heading Size="HeadingSize.Is5">Review your order</Heading>
            <Paragraph>Check your items, delivery address, and payment method.</Paragraph>
            <Paragraph Margin="Margin.Is0.FromBottom">Select an earlier step if you need to make a change.</Paragraph>
        </StepPanel>
    </Content>
</Steps>

@code {
    private string selectedStep = "payment";
}

Navigation Control

Use NavigationAllowed to check the current step before moving forward. In this example, enter a valid email address to continue. You can go back at any time without losing your entry.

The Validation component checks the email and shows a message beside the field. Moving forward calls Validations.ValidateAll(), whether you use Next or select a later step.

Enter your email address, then choose Next or select a later step. Try leaving the field empty to see the validation message.

You can return to this step to change your email address.
<Steps @ref="stepsRef" @bind-SelectedStep="selectedStep" NavigationAllowed="OnNavigationAllowedHandler" AriaLabel="Contact registration">
    <Items>
        <Step Name="contact">Contact</Step>
        <Step Name="review">Review</Step>
        <Step Name="finish">Finish</Step>
    </Items>
    <Content>
        <StepPanel Name="contact" Padding="Padding.Is3">
            <Paragraph>Enter your email address, then choose Next or select a later step. Try leaving the field empty to see the validation message.</Paragraph>
            <Validations @ref="contactValidations" Mode="ValidationMode.Manual">
                <Validation Validator="ValidationRule.IsEmail">
                    <Field Margin="Margin.Is0.FromBottom">
                        <FieldLabel>Email address</FieldLabel>
                        <TextInput @bind-Value="email" Role="TextRole.Email" Placeholder="e.g. alex@example.com">
                            <Feedback>
                                <ValidationError>Enter a valid email address to continue.</ValidationError>
                            </Feedback>
                        </TextInput>
                        <FieldHelp>You can return to this step to change your email address.</FieldHelp>
                    </Field>
                </Validation>
            </Validations>
        </StepPanel>
        <StepPanel Name="review" Padding="Padding.Is3">
            <Paragraph>Email address: @email</Paragraph>
            <Paragraph>Choose Previous to make a correction or Next to finish.</Paragraph>
        </StepPanel>
        <StepPanel Name="finish" Padding="Padding.Is3">
            <Paragraph>You have reached the final step. You can still go back and edit your details.</Paragraph>
        </StepPanel>
    </Content>
</Steps>
<Div Flex="Flex.JustifyContent.Center">
    <Button Color="Color.Secondary" Margin="Margin.Is2.FromEnd" Disabled="@( selectedStep == "contact" )" Clicked="OnPreviousClickedHandler">
        Previous
    </Button>
    <Button Color="Color.Primary" Disabled="@( selectedStep == "finish" )" Clicked="OnNextClickedHandler">
        Next
    </Button>
</Div>

@code {
    private Steps stepsRef;

    private Validations contactValidations;

    private string email;

    private string selectedStep = "contact";

    private Task OnPreviousClickedHandler() => stepsRef.PreviousStep();

    private Task OnNextClickedHandler() => stepsRef.NextStep();

    private Task<bool> OnNavigationAllowedHandler( StepNavigationContext context )
    {
        if ( context.CurrentStepIndex == 0 || context.NextStepIndex <= context.CurrentStepIndex )
        {
            return Task.FromResult( true );
        }

        return contactValidations.ValidateAll();
    }
}

Lazy Load

StepsRenderMode.LazyLoad creates each step's content on its first visit and keeps it afterward. Enter values below and switch steps to see how the inputs retain their state.

Enter contact details, visit Notes, then return. Your entries stay in place.

<Steps RenderMode="StepsRenderMode.LazyLoad" SelectedStep="contact" AriaLabel="Contact details with lazy loading">
    <Items>
        <Step Name="contact">Contact</Step>
        <Step Name="notes">Notes</Step>
    </Items>
    <Content>
        <StepPanel Name="contact" Padding="Padding.Is3">
            <Paragraph>Enter contact details, visit Notes, then return. Your entries stay in place.</Paragraph>
            <Field>
                <FieldLabel>Full name</FieldLabel>
                <TextInput Placeholder="e.g. Alex Morgan" />
            </Field>
            <Field Margin="Margin.Is0.FromBottom">
                <FieldLabel>Email address</FieldLabel>
                <TextInput Role="TextRole.Email" Placeholder="e.g. alex@example.com" />
            </Field>
        </StepPanel>
        <StepPanel Name="notes" Padding="Padding.Is3">
            <Paragraph>This form is created on your first visit and kept when you switch steps.</Paragraph>
            <Field>
                <FieldLabel>Subject</FieldLabel>
                <TextInput Placeholder="e.g. Project introduction" />
            </Field>
            <Field Margin="Margin.Is0.FromBottom">
                <FieldLabel>Notes</FieldLabel>
                <MemoInput Rows="3" Placeholder="Add a few details to discuss with this contact." />
            </Field>
        </StepPanel>
    </Content>
</Steps>

Lazy Reload

StepsRenderMode.LazyReload renders only the selected step's content and recreates it on each visit. These inputs keep their values locally, so switching steps clears them. Bind values to parent state when they need to persist.

Enter contact details, visit Notes, then return. The inputs are recreated and your entries are cleared.

<Steps RenderMode="StepsRenderMode.LazyReload" SelectedStep="contact" AriaLabel="Contact details with lazy reloading">
    <Items>
        <Step Name="contact">Contact</Step>
        <Step Name="notes">Notes</Step>
    </Items>
    <Content>
        <StepPanel Name="contact" Padding="Padding.Is3">
            <Paragraph>Enter contact details, visit Notes, then return. The inputs are recreated and your entries are cleared.</Paragraph>
            <Field>
                <FieldLabel>Full name</FieldLabel>
                <TextInput Placeholder="e.g. Alex Morgan" />
            </Field>
            <Field Margin="Margin.Is0.FromBottom">
                <FieldLabel>Email address</FieldLabel>
                <TextInput Role="TextRole.Email" Placeholder="e.g. alex@example.com" />
            </Field>
        </StepPanel>
        <StepPanel Name="notes" Padding="Padding.Is3">
            <Paragraph>Only the active panel's content is rendered. These inputs also start empty each time you return.</Paragraph>
            <Field>
                <FieldLabel>Subject</FieldLabel>
                <TextInput Placeholder="e.g. Project introduction" />
            </Field>
            <Field Margin="Margin.Is0.FromBottom">
                <FieldLabel>Notes</FieldLabel>
                <MemoInput Rows="3" Placeholder="Add a few details to discuss with this contact." />
            </Field>
        </StepPanel>
    </Content>
</Steps>

Custom colorsNew

Give each step a custom color for its marker and active or completed state. 
<Steps SelectedStep="review">
    <Step Name="details" Color="@("#0F766E")" Completed>Details</Step>
    <Step Name="review" Color="@(new Color("#DBB5E6"))">Review</Step>
    <Step Name="publish" Color="@CssColor.Variable("--accent", "#7C3AED")">Publish</Step>
</Steps>

Accessibility

Naming the Group

Screen readers can announce a name for the whole group. For example, set AriaLabel="Checkout progress" on Steps. To use an existing visible heading instead, set AriaLabelledBy to that heading's ID.

Keyboard Navigation

Press Tab to reach the selected step, then use the left and right arrow keys to move between steps. Vertical steps use the up and down arrow keys instead. Home and End move to the first and last steps. Press Enter or Space to open the chosen step, as long as your navigation rules allow it. Arrow keys alone do not change the displayed content.

Panel Focus

By default, users can reach the open panel with Tab to read or scroll its content. Set Focusable="false" on StepPanel to skip the panel itself. Buttons, links, and form controls inside it remain reachable with Tab.

Best Practices

True Sequence

Steps suit a multi-stage task with a clear beginning and end, not general-purpose page navigation. Give each stage a short label that describes its goal and show the user's current position. Keep the sequence manageable by combining steps that are too small to stand on their own.

Protect Progress

Validate the current step before allowing forward navigation, but let users return to completed steps without losing their input. If leaving the workflow would discard meaningful work, explain that consequence before navigating away.

Clear Labels

Use short, descriptive labels so users know what to expect at each step. Give the group a name that explains its purpose to screen reader users.

Keyboard Access

Keep the focus highlight visible so users can see which step they are about to open. Keep panels reachable by keyboard when they contain introductory text or need scrolling. Skip the panel itself only when users can go straight to its controls without missing useful content.

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page