sufi-blazor/docs/components/navigation/SbStepper.md

SbStepper

A multi-step wizard component for guiding users through a sequential process.

Parameters

Parameter	Type	Default	Description
ActiveIndex	int	0	Current active step index (0-based)
Linear	bool	true	Whether steps must be completed in order
Orientation	SbStepperOrientation	Horizontal	Stepper orientation
ShowNavigation	bool	true	Whether to show navigation buttons
BackText	string?	null	Text for the Back button; when null, uses localized default (e.g. "Previous")
NextText	string?	null	Text for the Next button; when null, uses localized default
FinishText	string?	null	Text for the Finish button; when null, uses localized default
OptionalText	string?	null	Text for optional step label; when null, uses localized default
Class	string?	null	Additional CSS classes

Events

Event	Type	Description
ActiveIndexChanged	EventCallback<int>	Fired when active step changes
OnFinish	EventCallback	Fired when stepper is completed

Templates / Slots

Slot	Type	Description
ChildContent	RenderFragment	Step content (SbStep components)

SbStep Parameters

Use SbStep inside SbStepper to define each step.

Parameter	Type	Default	Description
Label	string	""	Step label shown in the header
Description	string?	null	Optional description below the label
Optional	bool	false	When true, step is marked as optional (e.g. "Optional" label)
Icon	RenderFragment?	null	Custom icon for the step indicator (replaces the default number); completed steps still show a checkmark
ChildContent	RenderFragment?	null	Content shown when the step is active

SbStepperOrientation Enum

public enum SbStepperOrientation
{
    Horizontal,
    Vertical
}

CSS Classes

• sb-stepper - Base class
• sb-stepper--horizontal - Horizontal orientation
• sb-stepper--vertical - Vertical orientation
• sb-stepper__steps - Steps container
• sb-stepper__step - Individual step
• sb-stepper__step--completed - Completed step
• sb-stepper__step--active - Active step
• sb-stepper__step--pending - Pending step
• sb-stepper__step--optional - Optional step
• sb-stepper__step-button - Step button
• sb-stepper__step-indicator - Step number/icon indicator
• sb-stepper__step-labels - Step label container
• sb-stepper__step-label - Step label text
• sb-stepper__step-description - Step description
• sb-stepper__step-optional - Optional text label
• sb-stepper__connector - Connector line between steps
• sb-stepper__connector--completed - Completed connector
• sb-stepper__content - Content container
• sb-stepper__navigation - Navigation buttons container
• sb-stepper__back - Back button
• sb-stepper__next - Next button
• sb-stepper__finish - Finish button

Examples

Basic Usage

<SbStepper @bind-ActiveIndex="currentStep" OnFinish="HandleFinish">
    <SbStep Label="Account">
        <SbStack Gap="4">
            <SbTextField Label="Email" @bind-Value="email" />
            <SbTextField Label="Password" Type="password" @bind-Value="password" />
        </SbStack>
    </SbStep>
    <SbStep Label="Profile">
        <SbStack Gap="4">
            <SbTextField Label="First Name" @bind-Value="firstName" />
            <SbTextField Label="Last Name" @bind-Value="lastName" />
        </SbStack>
    </SbStep>
    <SbStep Label="Confirm">
        <SbStack Gap="2">
            <SbText>Email: @email</SbText>
            <SbText>Name: @firstName @lastName</SbText>
        </SbStack>
    </SbStep>
</SbStepper>

@code {
    private int currentStep = 0;
    private string email, password, firstName, lastName;
    
    private async Task HandleFinish()
    {
        // Submit the form
        await SaveUser();
    }
}

With Step Descriptions

Use the Description parameter on SbStep to show a subtitle under each step label.

<SbStepper @bind-ActiveIndex="step">
    <SbStep Label="Account Information" Description="Enter your personal details">
        <SbStack Gap="4">
            <SbTextField Label="Full Name" @bind-Value="fullName" />
            <SbTextField Label="Email" @bind-Value="email" />
        </SbStack>
    </SbStep>
    <SbStep Label="Address" Description="Provide your shipping address">
        <SbStack Gap="4">
            <SbTextField Label="Street" @bind-Value="street" />
            <SbTextField Label="City" @bind-Value="city" />
        </SbStack>
    </SbStep>
    <SbStep Label="Review" Description="Confirm your information">
        <SbText>Review and submit.</SbText>
    </SbStep>
</SbStepper>

Vertical Orientation

<SbStepper Orientation="SbStepperOrientation.Vertical" @bind-ActiveIndex="step">
    <SbStep Label="Step 1" Description="Enter basic information">
        Content for step 1
    </SbStep>
    <SbStep Label="Step 2" Description="Configure settings">
        Content for step 2
    </SbStep>
    <SbStep Label="Step 3" Description="Review and submit">
        Content for step 3
    </SbStep>
</SbStepper>

With Optional Steps

<SbStepper @bind-ActiveIndex="step">
    <SbStep Label="Required Info">
        Required step content
    </SbStep>
    <SbStep Label="Additional Info" Optional="true">
        Optional step content - can be skipped
    </SbStep>
    <SbStep Label="Confirmation">
        Final step content
    </SbStep>
</SbStepper>

Non-Linear Navigation

<SbStepper Linear="false" @bind-ActiveIndex="step">
    <SbStep Label="General">
        General settings
    </SbStep>
    <SbStep Label="Advanced">
        Advanced settings
    </SbStep>
    <SbStep Label="Review">
        Review settings
    </SbStep>
</SbStepper>

Custom Button Text

<SbStepper 
    BackText="Previous"
    NextText="Continue"
    FinishText="Complete Setup"
    OptionalText="(Optional)"
    @bind-ActiveIndex="step">
    <SbStep Label="Step 1">Content 1</SbStep>
    <SbStep Label="Step 2" Optional="true">Content 2</SbStep>
    <SbStep Label="Step 3">Content 3</SbStep>
</SbStepper>

Without Built-in Navigation

<SbStepper ShowNavigation="false" @bind-ActiveIndex="step">
    <SbStep Label="Step 1">
        <SbStack Gap="4">
            <p>Step 1 content</p>
            <SbButton OnClick="() => step++">Continue</SbButton>
        </SbStack>
    </SbStep>
    <SbStep Label="Step 2">
        <SbStack Gap="4">
            <p>Step 2 content</p>
            <SbStack Direction="SbStackDirection.Row" Gap="2">
                <SbButton Variant="SbButtonVariant.Outline" OnClick="() => step--">Back</SbButton>
                <SbButton OnClick="() => step++">Continue</SbButton>
            </SbStack>
        </SbStack>
    </SbStep>
</SbStepper>

@code {
    private int step = 0;
}

Checkout Flow

<SbStepper @bind-ActiveIndex="checkoutStep" OnFinish="PlaceOrder">
    <SbStep Label="Cart" Description="Review your items">
        <Icon><SbIcon Name="shopping-cart" /></Icon>
        <ChildContent>
            <SbStack Gap="4">
                @foreach (var item in cartItems)
                {
                    <SbCard>
                        <SbStack Direction="SbStackDirection.Row" Justify="SbJustify.SpaceBetween">
                            <span>@item.Name</span>
                            <span>@item.Price.ToString("C")</span>
                        </SbStack>
                    </SbCard>
                }
                <SbText Weight="semibold">Total: @cartTotal.ToString("C")</SbText>
            </SbStack>
        </ChildContent>
    </SbStep>
    <SbStep Label="Shipping" Description="Enter shipping address">
        <Icon><SbIcon Name="truck" /></Icon>
        <ChildContent>
            <SbGrid Columns="2" Gap="4">
                <SbTextField Label="First Name" @bind-Value="shipping.FirstName" />
                <SbTextField Label="Last Name" @bind-Value="shipping.LastName" />
                <SbGridItem Span="2">
                    <SbTextField Label="Address" @bind-Value="shipping.Address" />
                </SbGridItem>
                <SbTextField Label="City" @bind-Value="shipping.City" />
                <SbTextField Label="Zip Code" @bind-Value="shipping.ZipCode" />
            </SbGrid>
        </ChildContent>
    </SbStep>
    <SbStep Label="Payment" Description="Enter payment details">
        <Icon><SbIcon Name="credit-card" /></Icon>
        <ChildContent>
            <SbStack Gap="4">
                <SbTextField Label="Card Number" @bind-Value="payment.CardNumber" />
                <SbGrid Columns="2" Gap="4">
                    <SbTextField Label="Expiry" Placeholder="MM/YY" @bind-Value="payment.Expiry" />
                    <SbTextField Label="CVC" @bind-Value="payment.CVC" />
                </SbGrid>
            </SbStack>
        </ChildContent>
    </SbStep>
    <SbStep Label="Confirm" Description="Review your order">
        <Icon><SbIcon Name="check-circle" /></Icon>
        <ChildContent>
            <SbAlert Severity="SbAlertSeverity.Success">
                Order ready to be placed!
            </SbAlert>
        </ChildContent>
    </SbStep>
</SbStepper>