Syncfusion Blazor Stepper

Implementing the Syncfusion Blazor Stepper Component

The Blazor Stepper component provides an intuitive way to guide users through multi-step processes. It displays progress across numbered or labeled steps, supporting linear and non-linear workflows with customizable animations, templates, and validation states.

When to Use This Skill

Use the Stepper component when you need to:

• Create multi-step wizards or workflows
• Display progress through sequential tasks
• Build step-by-step forms with validation
• Implement checklist-style navigation
• Guide users through onboarding processes
• Show optional vs. required steps
• Validate step completion before progression

Component Overview

The Stepper displays steps in a horizontal or vertical layout with configurable indicators, labels, and templates. Each step can be customized with:

• Visual states: Not started, in progress, completed, error
• Labels and icons: Custom text and CSS icon classes
• Validation: Success or error indicators
• Templates: Custom content for advanced layouts
• Animations: Smooth transitions between steps

Documentation and Navigation Guide

API Reference

📄 Read: references/api-reference.md

• Complete API documentation for all properties, methods, and events
• Component and property definitions with direct links to implementation guides
• Event arguments reference and enumeration types
• Complete component hierarchy (SfStepper, StepperStep, StepperAnimationSettings)

Getting Started

📄 Read: references/getting-started.md

• Installation and package setup for Blazor WebAssembly and Blazor Web App
• Service registration and namespace imports
• Basic Stepper implementation with icons and labels
• Interactive render modes for modern Web Apps
• Theme configuration and CSS imports

Step Types and Configuration

📄 Read: references/step-types.md

• Step type variations (Default, Label, Indicator)
• Label positioning (Top, Bottom, Start, End)
• Step properties and attributes
• Optional and disabled steps
• Linear vs. non-linear workflows
• Step status management

Events and Interactions

📄 Read: references/events.md

• Event handlers and lifecycle (Created, StepChanged, StepChanging, StepClicked, StepRendered)
• Event arguments and parameters
• Common event patterns
• Handling step progression and validation

Templates and Customization

📄 Read: references/templates-and-styling.md

• Custom step templates
• Template context and properties
• CSS styling and customization
• CssClass property for individual steps
• Theme customization and appearance

Advanced Features

📄 Read: references/advanced-features.md

• Step validation (IsValid property and validation states)
• Validation workflow implementation
• Tooltip support (ShowTooltip property and custom templates)
• Step content templates and custom layouts
• Step completion tracking and error handling
• Conditional step display patterns

Animations and Globalization

📄 Read: references/animations-and-globalization.md

• Animation settings (Duration and Delay)
• Enabling/disabling animations
• Localization support
• RTL (Right-to-Left) support
• Multi-language configuration

Orientations and Layouts

📄 Read: references/orientations-and-layouts.md

• Horizontal orientation (default)
• Vertical orientation
• Linear flow with sequential progression
• Non-linear flow with free navigation
• Responsive design patterns
• Mobile and desktop layout considerations

Quick Start Example

@using Syncfusion.Blazor.Navigations

<SfStepper>
    <StepperSteps>
        <StepperStep Label="Cart" IconCss="sf-icon-cart"></StepperStep>
        <StepperStep Label="Address" IconCss="sf-icon-transport"></StepperStep>
        <StepperStep Label="Payment" IconCss="sf-icon-payment"></StepperStep>
        <StepperStep Label="Ordered" IconCss="sf-icon-success"></StepperStep>
    </StepperSteps>
</SfStepper>

Common Patterns

Linear Workflow

Use the Linear property to enforce sequential progression—users can only move to the next step after completing the current one.

<SfStepper Linear="true">
    <!-- Steps -->
</SfStepper>

Active Step Control

Set the ActiveStep property to control which step is currently active (0-indexed).

<SfStepper ActiveStep="1">
    <!-- Steps -->
</SfStepper>

Tracking Step Changes

Handle the StepChanged event to respond when users navigate between steps.

<SfStepper StepChanged="@OnStepChanged">
    <!-- Steps -->
</SfStepper>

@code {
    private void OnStepChanged(StepperChangedEventArgs args)
    {
        // Handle step change
    }
}

Validation States

Display success or error states using the IsValid property on individual steps.

<StepperStep Label="Payment" IsValid="true"></StepperStep>
<StepperStep Label="Confirm" IsValid="false"></StepperStep>

Key Properties

Step Properties:

• Label: Display text for the step
• Text: Alternative text content
• IconCss: CSS class for custom icons
• Disabled: Prevents interaction with the step
• Optional: Marks step as optional
• IsValid: Sets validation state (true/false/null)
• Status: Current state (NotStarted, InProgress, Completed)
• CssClass: Custom CSS class for styling

Common Use Cases

Checkout Flow: Guide users through purchase steps with validation and error handling.

Form Wizards: Break complex forms into manageable steps with optional sections.

Onboarding: Create step-by-step tutorials for new users with progress tracking.

Setup Wizards: Guide users through configuration processes with success/error states.

Task Lists: Display checklist-style progress with completed/pending indicators.

Advanced Features

Table of Contents

• Step Validation
• Validation States
• Form Validation Example
• Tooltip Support
• ShowTooltip Property
• Step Content Templates
• Step Completion Tracking
• Conditional Step Display
• Error Handling and Recovery

Step Validation

The Stepper component supports visual validation states for each step using the IsValid property. Steps can display success or error indicators based on validation results.

Validation States

• IsValid="true" - Display success/checkmark icon
• IsValid="false" - Display error icon
• IsValid="null" - No validation indicator (default)

@using Syncfusion.Blazor.Navigations

<SfStepper>
    <StepperSteps>
        <StepperStep Label="Cart" IsValid="true"></StepperStep>
        <StepperStep Label="Address"></StepperStep>
        <StepperStep Label="Payment" IsValid="false"></StepperStep>
        <StepperStep Label="Confirmation"></StepperStep>
    </StepperSteps>
</SfStepper>

Form Validation Example

@using Syncfusion.Blazor.Navigations
@using System.ComponentModel.DataAnnotations

<SfStepper @ref="stepper" StepChanging="@ValidateStep">
    <StepperSteps>
        <StepperStep @ref="step1" Label="Personal Info" IconCss="sf-icon-user"></StepperStep>
        <StepperStep @ref="step2" Label="Address" IconCss="sf-icon-location"></StepperStep>
        <StepperStep @ref="step3" Label="Payment" IconCss="sf-icon-payment"></StepperStep>
    </StepperSteps>
</SfStepper>

<EditForm Model="@formModel" OnSubmit="@HandleSubmit">
    <DataAnnotationsValidator />
    
    <div class="form-container">
        @if (currentStep == 0)
        {
            <div class="form-group">
                <label>Name:</label>
                <InputText @bind-Value="@formModel.Name" />
                <ValidationMessage For="@(() => formModel.Name)" />
            </div>
            <div class="form-group">
                <label>Email:</label>
                <InputText @bind-Value="@formModel.Email" />
                <ValidationMessage For="@(() => formModel.Email)" />
            </div>
        }
        else if (currentStep == 1)
        {
            <div class="form-group">
                <label>Street:</label>
                <InputText @bind-Value="@formModel.Street" />
                <ValidationMessage For="@(() => formModel.Street)" />
            </div>
            <div class="form-group">
                <label>City:</label>
                <InputText @bind-Value="@formModel.City" />
                <ValidationMessage For="@(() => formModel.City)" />
            </div>
        }
        else if (currentStep == 2)
        {
            <div class="form-group">
                <label>Card Number:</label>
                <InputText @bind-Value="@formModel.CardNumber" />
                <ValidationMessage For="@(() => formModel.CardNumber)" />
            </div>
        }
    </div>
    
    <button type="submit" class="btn-submit">
        @(currentStep < 2 ? "Next" : "Submit")
    </button>
</EditForm>

@code {
    private class FormModel
    {
        [Required(ErrorMessage = "Name is required")]
        public string Name { get; set; }
        
        [Required(ErrorMessage = "Email is required")]
        [EmailAddress]
        public string Email { get; set; }
        
        [Required(ErrorMessage = "Street is required")]
        public string Street { get; set; }
        
        [Required(ErrorMessage = "City is required")]
        public string City { get; set; }
        
        [Required(ErrorMessage = "Card number is required")]
        public string CardNumber { get; set; }
    }
    
    private SfStepper stepper;
    private StepperStep step1, step2, step3;
    private FormModel formModel = new FormModel();
    private int currentStep = 0;
    
    private async Task ValidateStep(StepperChangeEventArgs args)
    {
        if (args.ActiveStep > args.PreviousStep)
        {
            var isValid = await ValidateCurrentStep();
            args.Cancel = !isValid;
            
            // Update step validation indicator
            UpdateStepValidation(args.PreviousStep, isValid);
        }
    }
    
    private async Task<bool> ValidateCurrentStep()
    {
        var editContext = new EditContext(formModel);
        var validator = new DataAnnotationsValidator();
        validator.Validate(editContext);
        
        return editContext.GetValidationMessages().Count() == 0;
    }
    
    private void UpdateStepValidation(int stepIndex, bool isValid)
    {
        if (stepIndex == 0) step1.IsValid = isValid;
        else if (stepIndex == 1) step2.IsValid = isValid;
        else if (stepIndex == 2) step3.IsValid = isValid;
    }
    
    private void HandleSubmit()
    {
        Console.WriteLine("Form submitted successfully!");
    }
}

<style>
    .form-container {
        margin: 20px 0;
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 4px;
        background-color: #fafafa;
    }
    
    .form-group {
        margin-bottom: 15px;
    }
    
    .form-group label {
        display: block;
        font-weight: 600;
        margin-bottom: 5px;
    }
    
    .form-group input {
        width: 100%;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    
    .btn-submit {
        padding: 10px 20px;
        background-color: #2196F3;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-weight: 600;
    }
    
    .btn-submit:hover {
        background-color: #1976D2;
    }
</style>

Tooltip Support

The Stepper component supports tooltips to display additional information when users hover over steps.

ShowTooltip Property

Use the ShowTooltip property to enable tooltips on the Stepper component:

@using Syncfusion.Blazor.Navigations

<SfStepper ShowTooltip="true">
    <StepperSteps>
        <StepperStep Label="Cart" IconCss="sf-icon-cart"></StepperStep>
        <StepperStep Label="Delivery" IconCss="sf-icon-transport"></StepperStep>
        <StepperStep Label="Payment" IconCss="sf-icon-payment"></StepperStep>
        <StepperStep Label="Confirmation" IconCss="sf-icon-success"></StepperStep>
    </StepperSteps>
</SfStepper>

When ShowTooltip="true":

• Tooltips appear on mouse hover over steps
• Tooltip content defaults to the step's Label or Text property
• Works for all step types (Default, Label, Indicator)

Step Content Templates

Use content templates to create complex step layouts with custom HTML and Blazor components.

@using Syncfusion.Blazor.Navigations

<SfStepper ActiveStep="@currentStep">
    <ChildContent>
        <StepperSteps>
            <StepperStep Label="Step 1"></StepperStep>
            <StepperStep Label="Step 2"></StepperStep>
            <StepperStep Label="Step 3"></StepperStep>
        </StepperSteps>
    </ChildContent>
    <Template>
        <div class="custom-step-template">
            <div class="step-number">@(context.Step + 1)</div>
            <div class="step-details">
                <strong>@context.Label</strong>
                <p>@GetStepDescription(context.Step)</p>
            </div>
        </div>
    </Template>
</SfStepper>

@code {
    private int currentStep = 0;
    
    private string GetStepDescription(int step)
    {
        return step switch
        {
            0 => "Enter your personal information",
            1 => "Provide your shipping address",
            2 => "Select payment method",
            _ => ""
        };
    }
}

<style>
    .custom-step-template {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px;
    }
    
    .step-number {
        width: 30px;
        height: 30px;
        background-color: #2196F3;
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
    }
    
    .step-details strong {
        display: block;
        margin-bottom: 5px;
    }
    
    .step-details p {
        margin: 0;
        font-size: 12px;
        color: #666;
    }
</style>

Step Completion Tracking

Track step completion status and display progress information.

@using Syncfusion.Blazor.Navigations

<SfStepper @ref="stepper" StepChanged="@OnStepChanged">
    <StepperSteps>
        <StepperStep Label="Step 1" @ref="step1"></StepperStep>
        <StepperStep Label="Step 2" @ref="step2"></StepperStep>
        <StepperStep Label="Step 3" @ref="step3"></StepperStep>
        <StepperStep Label="Step 4" @ref="step4"></StepperStep>
    </StepperSteps>
</SfStepper>

<div class="progress-info">
    <p>Completed Steps: @completedSteps/@totalSteps</p>
    <p>Progress: @((completedSteps * 100) / totalSteps)%</p>
    <div class="progress-bar">
        <div class="progress-fill" style="width: @((completedSteps * 100) / totalSteps)%"></div>
    </div>
</div>

<button @onclick="CompleteCurrentStep">Mark Step Complete</button>

@code {
    private SfStepper stepper;
    private StepperStep step1, step2, step3, step4;
    private int completedSteps = 0;
    private int totalSteps = 4;
    
    private void OnStepChanged(StepperChangedEventArgs args)
    {
        Console.WriteLine($"Current step: {args.ActiveStep}");
    }
    
    private async Task CompleteCurrentStep()
    {
        var currentStep = stepper.ActiveStep;
        completedSteps++;
        
        // Update step status
        var steps = new[] { step1, step2, step3, step4 };
        if (currentStep < steps.Length)
        {
            steps[currentStep].Status = StepperStatus.Completed;
        }
        
        // Move to next step if available
        if (currentStep < totalSteps - 1)
        {
            await stepper.NextStepAsync();
        }
    }
}

<style>
    .progress-info {
        margin: 20px 0;
        padding: 15px;
        background-color: #f5f5f5;
        border-radius: 4px;
    }
    
    .progress-bar {
        height: 8px;
        background-color: #e0e0e0;
        border-radius: 4px;
        overflow: hidden;
        margin-top: 10px;
    }
    
    .progress-fill {
        height: 100%;
        background-color: #4CAF50;
        transition: width 0.3s ease;
    }
</style>

Conditional Step Display

Show or hide steps based on conditions or user selections.

@using Syncfusion.Blazor.Navigations

<SfStepper>
    <StepperSteps>
        <StepperStep Label="Shipping Method"></StepperStep>
        @if (includeGiftWrap)
        {
            <StepperStep Label="Gift Wrapping" Optional="true"></StepperStep>
        }
        @if (shippingMethod == "Express")
        {
            <StepperStep Label="Express Delivery Confirmation"></StepperStep>
        }
        <StepperStep Label="Payment"></StepperStep>
    </StepperSteps>
</SfStepper>

<div>
    <label>
        <input type="checkbox" @bind="@includeGiftWrap" />
        Include Gift Wrapping
    </label>
</div>

<div>
    <label>
        <select @bind="@shippingMethod">
            <option>Standard</option>
            <option>Express</option>
        </select>
    </label>
</div>

@code {
    private bool includeGiftWrap = false;
    private string shippingMethod = "Standard";
}

Error Handling and Recovery

Handle errors during step transitions and provide recovery options.

@using Syncfusion.Blazor.Navigations

<SfStepper StepChanging="@OnStepChanging">
    <StepperSteps>
        <StepperStep Label="Submit Data"></StepperStep>
        <StepperStep Label="Processing"></StepperStep>
        <StepperStep Label="Complete"></StepperStep>
    </StepperSteps>
</SfStepper>

@if (!string.IsNullOrEmpty(errorMessage))
{
    <div class="error-message">
        <strong>Error:</strong> @errorMessage
        <button @onclick="RetryStep">Retry</button>
    </div>
}

@code {
    private string errorMessage = "";
    
    private async Task OnStepChanging(StepperChangeEventArgs args)
    {
        try
        {
            // Simulate step processing
            await ProcessStep(args.ActiveStep);
        }
        catch (Exception ex)
        {
            errorMessage = ex.Message;
            args.Cancel = true;
        }
    }
    
    private async Task ProcessStep(int stepIndex)
    {
        // Simulate API call or processing
        await Task.Delay(500);
        
        if (stepIndex == 1 && new Random().Next(2) == 0)
        {
            throw new Exception("Failed to process data. Please try again.");
        }
    }
    
    private void RetryStep()
    {
        errorMessage = "";
    }
}

<style>
    .error-message {
        margin: 20px 0;
        padding: 15px;
        background-color: #fee;
        border: 1px solid #fcc;
        border-radius: 4px;
        color: #c33;
    }
    
    .error-message button {
        margin-left: 10px;
        padding: 5px 10px;
        background-color: #c33;
        color: white;
        border: none;
        border-radius: 3px;
        cursor: pointer;
    }
</style>

Animations and Globalization

Table of Contents

• Animation Settings
• Animation Configuration
• Animation Properties
• Disabling Animations
• Custom Animation Timing
• Localization
• Enable Localization
• Localized Stepper Example
• Right-to-Left (RTL) Support
• Basic RTL Implementation
• Dynamic RTL Toggle
• RTL with Arabic Content
• Combining Localization and RTL
• Performance Considerations
• Animation Performance Tips
• Accessibility with Animations

Animation Settings

The Stepper component supports smooth animations when transitioning between steps. Configure animation behavior using the StepperAnimationSettings tag directive.

Animation Configuration

@using Syncfusion.Blazor.Navigations

<SfStepper>
    <StepperSteps>
        <StepperStep Label="Cart"></StepperStep>
        <StepperStep Label="Shipping"></StepperStep>
        <StepperStep Label="Payment"></StepperStep>
        <StepperStep Label="Review"></StepperStep>
    </StepperSteps>
    <StepperAnimationSettings Enable="true" Duration="2000" Delay="500"></StepperAnimationSettings>
</SfStepper>

Animation Properties

Disabling Animations

For performance optimization or accessibility reasons, disable animations:

<SfStepper>
    <StepperSteps>
        <StepperStep Label="Step 1"></StepperStep>
        <StepperStep Label="Step 2"></StepperStep>
        <StepperStep Label="Step 3"></StepperStep>
    </StepperSteps>
    <StepperAnimationSettings Enable="false"></StepperAnimationSettings>
</SfStepper>

Custom Animation Timing

@using Syncfusion.Blazor.Navigations

<div>
    <div>
        <label>
            Duration (ms): 
            <input type="number" @bind="animationDuration" min="0" max="5000" step="100" />
        </label>
    </div>
    <div>
        <label>
            Delay (ms): 
            <input type="number" @bind="animationDelay" min="0" max="2000" step="50" />
        </label>
    </div>
</div>

<SfStepper>
    <StepperSteps>
        <StepperStep Label="Step 1"></StepperStep>
        <StepperStep Label="Step 2"></StepperStep>
        <StepperStep Label="Step 3"></StepperStep>
    </StepperSteps>
    <StepperAnimationSettings Enable="true" Duration="@animationDuration" Delay="@animationDelay"></StepperAnimationSettings>
</SfStepper>

@code {
    private int animationDuration = 2000;
    private int animationDelay = 0;
}

<style>
    label {
        display: block;
        margin: 10px 0;
    }
    
    input[type="number"] {
        width: 100px;
        padding: 5px;
    }
</style>

Localization

The Stepper component supports localization for displaying text in different languages. Syncfusion provides localized resources for multiple languages.

Enable Localization

First, set up the culture in your Blazor application:

// In Program.cs
using System.Globalization;

var host = builder.Build();
CultureInfo.DefaultThreadCurrentCulture = new CultureInfo("fr-FR");
CultureInfo.DefaultThreadCurrentUICulture = new CultureInfo("fr-FR");

await host.RunAsync();

Localized Stepper Example

@using Syncfusion.Blazor.Navigations
@using System.Globalization

<div>
    <button @onclick="@(() => ChangeCulture("en-US"))">English</button>
    <button @onclick="@(() => ChangeCulture("fr-FR"))">Français</button>
    <button @onclick="@(() => ChangeCulture("es-ES"))">Español</button>
    <button @onclick="@(() => ChangeCulture("de-DE"))">Deutsch</button>
</div>

<SfStepper>
    <StepperSteps>
        <StepperStep Label="@GetLocalizedLabel("cart")"></StepperStep>
        <StepperStep Label="@GetLocalizedLabel("address")"></StepperStep>
        <StepperStep Label="@GetLocalizedLabel("payment")"></StepperStep>
        <StepperStep Label="@GetLocalizedLabel("confirmation")"></StepperStep>
    </StepperSteps>
</SfStepper>

@code {
    private Dictionary<string, Dictionary<string, string>> localizations = new()
    {
        { "en-US", new()
            {
                { "cart", "Shopping Cart" },
                { "address", "Delivery Address" },
                { "payment", "Payment Method" },
                { "confirmation", "Order Confirmation" }
            }
        },
        { "fr-FR", new()
            {
                { "cart", "Panier" },
                { "address", "Adresse de Livraison" },
                { "payment", "Méthode de Paiement" },
                { "confirmation", "Confirmation de Commande" }
            }
        },
        { "es-ES", new()
            {
                { "cart", "Carrito de Compras" },
                { "address", "Dirección de Envío" },
                { "payment", "Método de Pago" },
                { "confirmation", "Confirmación del Pedido" }
            }
        },
        { "de-DE", new()
            {
                { "cart", "Einkaufswagen" },
                { "address", "Lieferadresse" },
                { "payment", "Zahlungsmethode" },
                { "confirmation", "Bestellbestätigung" }
            }
        }
    };
    
    private string currentCulture = "en-US";
    
    private void ChangeCulture(string culture)
    {
        currentCulture = culture;
        CultureInfo.CurrentCulture = new CultureInfo(culture);
        CultureInfo.CurrentUICulture = new CultureInfo(culture);
    }
    
    private string GetLocalizedLabel(string key)
    {
        if (localizations.TryGetValue(currentCulture, out var labels))
        {
            if (labels.TryGetValue(key, out var label))
            {
                return label;
            }
        }
        return key;
    }
}

Right-to-Left (RTL) Support

Enable RTL layout for languages that read from right to left.

Basic RTL Implementation

@using Syncfusion.Blazor.Navigations

<SfStepper EnableRtl="true">
    <StepperSteps>
        <StepperStep Label="الخطوة الأولى"></StepperStep>
        <StepperStep Label="الخطوة الثانية"></StepperStep>
        <StepperStep Label="الخطوة الثالثة"></StepperStep>
        <StepperStep Label="الخطوة الرابعة"></StepperStep>
    </StepperSteps>
</SfStepper>

Dynamic RTL Toggle

@using Syncfusion.Blazor.Navigations

<div>
    <label>
        <input type="checkbox" @bind="enableRtl" />
        Enable RTL
    </label>
</div>

<SfStepper EnableRtl="@enableRtl">
    <StepperSteps>
        <StepperStep Label="@(enableRtl ? "المشتريات" : "Shopping")"></StepperStep>
        <StepperStep Label="@(enableRtl ? "العنوان" : "Address")"></StepperStep>
        <StepperStep Label="@(enableRtl ? "الدفع" : "Payment")"></StepperStep>
        <StepperStep Label="@(enableRtl ? "التأكيد" : "Confirmation")"></StepperStep>
    </StepperSteps>
</SfStepper>

@code {
    private bool enableRtl = false;
}

<style>
    label {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 20px;
    }
    
    input[type="checkbox"] {
        cursor: pointer;
    }
</style>

RTL with Arabic Content

@using Syncfusion.Blazor.Navigations

<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Stepper - RTL</title>
    <link href="_content/Syncfusion.Blazor.Themes/material3-rtl.css" rel="stylesheet" />
</head>
<body>
    <div id="app"></div>
    <script src="_framework/blazor.web.js"></script>
</body>
</html>

<!-- In your Blazor component -->
<SfStepper EnableRtl="true">
    <StepperSteps>
        <StepperStep Label="معلومات شخصية" IconCss="sf-icon-user"></StepperStep>
        <StepperStep Label="عنوان التسليم" IconCss="sf-icon-location"></StepperStep>
        <StepperStep Label="طريقة الدفع" IconCss="sf-icon-payment"></StepperStep>
        <StepperStep Label="تأكيد الطلب" IconCss="sf-icon-success"></StepperStep>
    </StepperSteps>
</SfStepper>

Combining Localization and RTL

@using Syncfusion.Blazor.Navigations
@using System.Globalization

<div>
    <button @onclick="@(() => SetLanguage("en-US", false))">English</button>
    <button @onclick="@(() => SetLanguage("ar-AE", true))">العربية</button>
    <button @onclick="@(() => SetLanguage("he-IL", true))">עברית</button>
    <button @onclick="@(() => SetLanguage("fa-IR", true))">فارسی</button>
</div>

<SfStepper EnableRtl="@enableRtl">
    <StepperSteps>
        <StepperStep Label="@GetLocalizedLabel("step1")"></StepperStep>
        <StepperStep Label="@GetLocalizedLabel("step2")"></StepperStep>
        <StepperStep Label="@GetLocalizedLabel("step3")"></StepperStep>
        <StepperStep Label="@GetLocalizedLabel("step4")"></StepperStep>
    </StepperSteps>
</SfStepper>

@code {
    private Dictionary<string, Dictionary<string, string>> localizations = new()
    {
        { "en-US", new()
            {
                { "step1", "Step 1" },
                { "step2", "Step 2" },
                { "step3", "Step 3" },
                { "step4", "Step 4" }
            }
        },
        { "ar-AE", new()
            {
                { "step1", "الخطوة الأولى" },
                { "step2", "الخطوة الثانية" },
                { "step3", "الخطوة الثالثة" },
                { "step4", "الخطوة الرابعة" }
            }
        },
        { "he-IL", new()
            {
                { "step1", "שלב 1" },
                { "step2", "שלב 2" },
                { "step3", "שלב 3" },
                { "step4", "שלב 4" }
            }
        },
        { "fa-IR", new()
            {
                { "step1", "مرحله اول" },
                { "step2", "مرحله دوم" },
                { "step3", "مرحله سوم" },
                { "step4", "مرحله چهارم" }
            }
        }
    };
    
    private bool enableRtl = false;
    private string currentCulture = "en-US";
    
    private void SetLanguage(string culture, bool rtl)
    {
        currentCulture = culture;
        enableRtl = rtl;
        CultureInfo.CurrentCulture = new CultureInfo(culture);
        CultureInfo.CurrentUICulture = new CultureInfo(culture);
    }
    
    private string GetLocalizedLabel(string key)
    {
        if (localizations.TryGetValue(currentCulture, out var labels))
        {
            if (labels.TryGetValue(key, out var label))
            {
                return label;
            }
        }
        return key;
    }
}

Performance Considerations

Animation Performance Tips

1. Disable animations for low-end devices or accessibility features 2. Use shorter durations for mobile applications 3. Reduce animation delay for responsive feel

private bool IsLowEndDevice()
{
    // Detect device capability and disable animations if needed
    return false;
}

<StepperAnimationSettings 
    Enable="@!IsLowEndDevice()" 
    Duration="@(IsLowEndDevice() ? 0 : 2000)">
</StepperAnimationSettings>

Accessibility with Animations

Always consider users with motion sensitivity. Provide a way to disable animations:

<div>
    <label>
        <input type="checkbox" @bind="prefersReducedMotion" />
        Reduce Motion
    </label>
</div>

<SfStepper>
    <StepperSteps>
        <!-- Steps -->
    </StepperSteps>
    <StepperAnimationSettings Enable="@!prefersReducedMotion"></StepperAnimationSettings>
</SfStepper>

@code {
    private bool prefersReducedMotion = false;
}

Syncfusion Blazor Stepper API Reference

Table of Contents

• Overview
• Main Component: SfStepper
• Properties
• Methods
• Events
• StepperStep Component
• StepperAnimationSettings Component
• Enumeration Types
• Event Arguments Reference
• Complete Implementation Example
• Namespace and Usage
• Related References

---

Overview

The SfStepper component from Syncfusion Blazor suite provides a visual representation of multi-step processes. This API reference documents all properties, methods, and events available in the Stepper component and its related classes.

---

Main Component: SfStepper

Properties

Note: For detailed examples of properties like ActiveStep, LabelPosition, Linear, Orientation, ReadOnly, ShowTooltip, StepType, and Template, refer to their respective documentation files linked above.

CssClass Example

<SfStepper CssClass="custom-stepper dark-theme">
    <StepperSteps>
        <StepperStep Label="Styled Step"></StepperStep>
    </StepperSteps>
</SfStepper>

<style>
    .custom-stepper.dark-theme {
        background-color: #333;
        color: #fff;
    }
</style>

ID Example

<SfStepper ID="checkoutStepper">
    <StepperSteps>
        <StepperStep Label="Checkout"></StepperStep>
    </StepperSteps>
</SfStepper>

TooltipTemplate Example

<SfStepper ShowTooltip="true">
    <StepperSteps>
        <StepperStep Label="Info" Text="Step information"></StepperStep>
    </StepperSteps>
    <TooltipTemplate>
        <div class="custom-tooltip">
            <strong>@context.Label</strong>
            <span>@context.Text</span>
        </div>
    </TooltipTemplate>
</SfStepper>

---

Methods

NextStepAsync

Programmatically advance to the next step in the stepper.

@using Syncfusion.Blazor.Navigations

<SfStepper @ref="stepper">
    <StepperSteps>
        <StepperStep Label="Step 1"></StepperStep>
        <StepperStep Label="Step 2"></StepperStep>
        <StepperStep Label="Step 3"></StepperStep>
    </StepperSteps>
</SfStepper>

<button @onclick="GoNext">Next Step</button>

@code {
    private SfStepper stepper;
    
    private async Task GoNext()
    {
        await stepper.NextStepAsync();
    }
}

PreviousStepAsync

Move back to the previous step.

@using Syncfusion.Blazor.Navigations

<SfStepper @ref="stepper">
    <StepperSteps>
        <StepperStep Label="Step 1"></StepperStep>
        <StepperStep Label="Step 2"></StepperStep>
        <StepperStep Label="Step 3"></StepperStep>
    </StepperSteps>
</SfStepper>

<button @onclick="GoPrevious">Previous Step</button>

@code {
    private SfStepper stepper;
    
    private async Task GoPrevious()
    {
        await stepper.PreviousStepAsync();
    }
}

ResetAsync

Reset the stepper to its initial state and first step.

@using Syncfusion.Blazor.Navigations

<SfStepper @ref="stepper">
    <StepperSteps>
        <StepperStep Label="Start"></StepperStep>
        <StepperStep Label="Middle"></StepperStep>
        <StepperStep Label="End"></StepperStep>
    </StepperSteps>
</SfStepper>

<button @onclick="ResetProcess">Reset</button>

@code {
    private SfStepper stepper;
    
    private async Task ResetProcess()
    {
        await stepper.ResetAsync();
    }
}

RefreshProgressbarAsync

Adjusts the progress bar when the container is resized.

@using Syncfusion.Blazor.Navigations

<SfStepper @ref="stepper">
    <StepperSteps>
        <StepperStep Label="Step 1"></StepperStep>
        <StepperStep Label="Step 2"></StepperStep>
    </StepperSteps>
</SfStepper>

<button @onclick="HandleResize">Refresh Layout</button>

@code {
    private SfStepper stepper;
    
    private async Task HandleResize()
    {
        // After container size changes
        await stepper.RefreshProgressbarAsync();
    }
}

---

Events

Note: For detailed examples of all events listed above, refer to events.md.

---

StepperStep Component

Individual step within the SfStepper container.

StepperStep Properties

Note: For detailed examples of StepperStep properties like CssClass, Disabled, IsValid, Optional, and Status, refer to their linked documentation files.

StepperStep IconCss

Display an icon for each step.

<StepperStep Label="Personal" IconCss="sf-icon-user"></StepperStep>
<StepperStep Label="Address" IconCss="sf-icon-location"></StepperStep>
<StepperStep Label="Payment" IconCss="sf-icon-credit"></StepperStep>

StepperStep Label

Set the primary label text for the step.

<StepperStep Label="Checkout"></StepperStep>

StepperStep Text

Add supplementary text description below the label.

<StepperStep Label="Shipping" Text="Select delivery address"></StepperStep>

---

StepperAnimationSettings Component

Configure animation behavior for the stepper.

Properties

---

Enumeration Types

StepperOrientation

public enum StepperOrientation
{
    Horizontal,  // Steps displayed in horizontal layout
    Vertical     // Steps displayed in vertical layout
}

StepperStatus

public enum StepperStatus
{
    NotStarted,  // Step has not been started
    InProgress,  // Step is currently active
    Completed    // Step has been completed
}

StepperLabelPosition

public enum StepperLabelPosition
{
    Bottom,  // Labels appear below step indicators
    Top,     // Labels appear above step indicators
    Start,   // Labels appear at the start (left for LTR)
    End      // Labels appear at the end (right for LTR)
}

StepperType

public enum StepperType
{
    Default,    // Display both indicators and labels
    Indicator,  // Display only step indicators
    Label       // Display only step labels
}

---

Event Arguments Reference

StepperChangedEventArgs

Passed to StepChanged and as base for StepperChangeEventArgs.

Properties:

• ActiveStep (int): Current active step index
• PreviousStep (int): Previous step index
• IsInteracted (bool): True if change was user-initiated

StepperChangeEventArgs

Passed to StepChanging event.

Properties:

• ActiveStep (int): Step being navigated to
• PreviousStep (int): Current step
• IsInteracted (bool): True if change was user-initiated
• Cancel (bool): Set to true to cancel navigation

StepperClickedEventArgs

Passed to StepClicked event.

Properties:

• ActiveStep (int): Clicked step index
• PreviousStep (int): Previously active step index

StepperRenderedEventArgs

Passed to StepRendered event.

Properties:

• Index (int): The index of the rendered step.
• Step (int): The step element that is being rendered.

---

Complete Implementation Example

@using Syncfusion.Blazor.Navigations

<div class="stepper-container">
    <SfStepper @ref="stepper"
               ActiveStep="activeStep"
               Linear="isLinear"
               Orientation="StepperOrientation.Horizontal"
               LabelPosition="StepperLabelPosition.Bottom"
               ShowTooltip="true"
               StepChanging="OnStepChanging"
               StepChanged="OnStepChanged"
               StepClicked="OnStepClicked">
        
        <StepperSteps>
            <StepperStep Label="Cart" IconCss="sf-icon-cart" Text="Review items"></StepperStep>
            <StepperStep Label="Shipping" IconCss="sf-icon-truck" Text="Enter address"></StepperStep>
            <StepperStep Label="Payment" IconCss="sf-icon-card" Text="Payment details"></StepperStep>
            <StepperStep Label="Confirmation" IconCss="sf-icon-check" Text="Order placed"></StepperStep>
        </StepperSteps>
        
        <StepperAnimationSettings Enable="true" Duration="1000" Delay="100"></StepperAnimationSettings>
        
        <TooltipTemplate>
            <div class="tooltip-content">
                <strong>@context.Label</strong>
                <p>@context.Text</p>
            </div>
        </TooltipTemplate>
    </SfStepper>
</div>

<div class="button-group">
    <button @onclick="PreviousStep" disabled="@(activeStep == 0)">Previous</button>
    <button @onclick="NextStep" disabled="@(activeStep >= 3)">Next</button>
    <button @onclick="ResetStepper">Reset</button>
</div>

<div class="status-info">
    <p>Current Step: @activeStep</p>
    <p>@statusMessage</p>
</div>

@code {
    private SfStepper stepper;
    private int activeStep = 0;
    private bool isLinear = false;
    private string statusMessage = "";

    private async Task NextStep()
    {
        if (activeStep < 3)
        {
            await stepper.NextStepAsync();
        }
    }

    private async Task PreviousStep()
    {
        if (activeStep > 0)
        {
            await stepper.PreviousStepAsync();
        }
    }

    private async Task ResetStepper()
    {
        await stepper.ResetAsync();
        activeStep = 0;
        statusMessage = "Stepper has been reset";
    }

    private void OnStepChanging(StepperChangeEventArgs args)
    {
        statusMessage = $"Attempting to move from step {args.PreviousStep} to step {args.ActiveStep}";
        
        // Validate before allowing step change
        if (args.ActiveStep > args.PreviousStep && !ValidateCurrentStep(args.PreviousStep))
        {
            args.Cancel = true;
            statusMessage = "Cannot proceed - validation failed!";
        }
    }

    private void OnStepChanged(StepperChangedEventArgs args)
    {
        activeStep = args.ActiveStep;
        statusMessage = $"Successfully moved to step {args.ActiveStep}";
    }

    private void OnStepClicked(StepperClickedEventArgs args)
    {
        statusMessage = $"Clicked on step {args.ActiveStep}";
    }

    private bool ValidateCurrentStep(int stepIndex)
    {
        return true; // Implement actual validation logic
    }
}

<style>
    .stepper-container {
        padding: 20px;
        background: #f5f5f5;
        border-radius: 4px;
    }

    .button-group {
        margin-top: 20px;
        display: flex;
        gap: 10px;
    }

    .button-group button {
        padding: 8px 16px;
        background: #007bff;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    .button-group button:disabled {
        background: #ccc;
        cursor: not-allowed;
    }

    .status-info {
        margin-top: 20px;
        padding: 10px;
        background: white;
        border-radius: 4px;
    }

    .tooltip-content {
        padding: 10px;
        background: #333;
        color: white;
        border-radius: 4px;
    }
</style>

---

Namespace and Usage

To use the Stepper component, include the following namespace in your Blazor component:

@using Syncfusion.Blazor.Navigations

In your Program.cs, register Syncfusion services:

builder.Services.AddSyncfusionBlazor();

---

Related References

• [Getting Started Guide](getting-started.md) — Installation, setup, namespaces, and basic examples
• [Step Types Guide](step-types.md) — Step type variations, label positioning, optional/disabled steps, active step control, status, and read-only mode
• [Orientations and Layouts](orientations-and-layouts.md) — Horizontal/vertical orientations, linear/non-linear flows, responsive layouts, and layout combinations
• [Events Reference](events.md) — All event documentation (Created, StepChanged, StepChanging, StepClicked, StepRendered) with event args and patterns
• [Templates and Styling](templates-and-styling.md) — Custom templates, CSS customization, CssClass property, theme support, and advanced examples
• [Advanced Features](advanced-features.md) — Step validation, tooltips, custom templates, completion tracking, conditional display, and error handling
• [Animations and Globalization](animations-and-globalization.md) — Animation settings, localization support, RTL implementation, and performance tips

Events and Interactions

Table of Contents

• Created Event
• StepChanged Event
• StepChanging Event
• StepClicked Event
• StepRendered Event
• Event Handling Patterns

Created Event

The Created event fires when the Stepper component has finished rendering.

Usage: Initialize data or perform setup operations after the component is ready.

@using Syncfusion.Blazor.Navigations

<SfStepper Created="OnStepperCreated">
    <StepperSteps>
        <StepperStep Label="Step 1"></StepperStep>
        <StepperStep Label="Step 2"></StepperStep>
        <StepperStep Label="Step 3"></StepperStep>
    </StepperSteps>
</SfStepper>

@code {
    private void OnStepperCreated()
    {
        Console.WriteLine("Stepper component has been created and rendered.");
        // Perform initialization tasks here
    }
}

Event Args: None (void callback)

StepChanged Event

The StepChanged event fires after the active step has been changed successfully.

Usage: Respond to step navigation, update UI, or trigger data loading for the new step.

@using Syncfusion.Blazor.Navigations

<SfStepper @ref="stepper" StepChanged="OnStepChanged">
    <StepperSteps>
        <StepperStep Label="Cart"></StepperStep>
        <StepperStep Label="Address"></StepperStep>
        <StepperStep Label="Payment"></StepperStep>
    </StepperSteps>
</SfStepper>

<div>Current step: @currentStepIndex</div>

@code {
    private SfStepper stepper;
    private int currentStepIndex = 0;
    
    private void OnStepChanged(StepperChangedEventArgs args)
    {
        currentStepIndex = args.ActiveStep;
        Console.WriteLine($"Active step changed to: {currentStepIndex}");
        // Load data for the new step
        LoadStepData(currentStepIndex);
    }
    
    private void LoadStepData(int stepIndex)
    {
        // Load step-specific data here
    }
}

Event Args (`StepperChangedEventArgs`):

• ActiveStep (int): Current active step index
• PreviousStep (int): Previous step index
• IsInteracted (bool): True if change was user-initiated

StepChanging Event

The StepChanging event fires before the active step is about to change. You can cancel the navigation by setting Cancel to true.

Usage: Validate step completion or prevent navigation based on conditions.

@using Syncfusion.Blazor.Navigations

<SfStepper StepChanging="OnStepChanging">
    <StepperSteps>
        <StepperStep Label="Form Step"></StepperStep>
        <StepperStep Label="Review Step"></StepperStep>
        <StepperStep Label="Submit Step"></StepperStep>
    </StepperSteps>
</SfStepper>

<div>@validationMessage</div>

@code {
    private string validationMessage = "";
    
    private void OnStepChanging(StepperChangeEventArgs args)
    {
        // Prevent moving forward if validation fails
        if (args.ActiveStep > args.PreviousStep && !IsCurrentStepValid())
        {
            args.Cancel = true;
            validationMessage = "Please complete all required fields before proceeding.";
            Console.WriteLine("Navigation cancelled due to validation failure.");
        }
        else
        {
            validationMessage = "";
            Console.WriteLine($"Moving from step {args.PreviousStep} to step {args.ActiveStep}");
        }
    }
    
    private bool IsCurrentStepValid()
    {
        // Implement validation logic
        return true;
    }
}

Event Args (`StepperChangeEventArgs`):

• ActiveStep (int): Step being navigated to
• PreviousStep (int): Current step
• IsInteracted (bool): True if change was user-initiated
• Cancel (bool): Set to true to cancel navigation

StepClicked Event

The StepClicked event fires when a step is clicked.

Usage: Track user interactions or provide feedback on step selection attempts.

@using Syncfusion.Blazor.Navigations

<SfStepper StepClicked="OnStepClicked">
    <StepperSteps>
        <StepperStep Label="Step 1"></StepperStep>
        <StepperStep Label="Step 2"></StepperStep>
        <StepperStep Label="Step 3"></StepperStep>
    </StepperSteps>
</SfStepper>

<div>Last clicked step: @lastClickedStep</div>

@code {
    private int lastClickedStep = -1;
    
    private void OnStepClicked(StepperClickedEventArgs args)
    {
        lastClickedStep = args.ActiveStep;
        Console.WriteLine($"Step {args.Step} was clicked.");
    }
}

Event Args (`StepperClickedEventArgs`):

• ActiveStep (int): Clicked step index
• PreviousStep (int): Previously active step index

StepRendered Event

The StepRendered event fires after each step is rendered.

Usage: Apply custom styling or perform operations on specific steps after rendering.

@using Syncfusion.Blazor.Navigations

<SfStepper StepRendered="OnStepRendered">
    <StepperSteps>
        <StepperStep Label="Step 1"></StepperStep>
        <StepperStep Label="Step 2"></StepperStep>
        <StepperStep Label="Step 3"></StepperStep>
    </StepperSteps>
</SfStepper>

<div>Steps rendered: @stepsRendered</div>

@code {
    private int stepsRendered = 0;
    
    private void OnStepRendered(StepperRenderedEventArgs args)
    {
        stepsRendered++;
        Console.WriteLine($"Step {args.Step} has been rendered.");
    }
}

Event Args (`StepperRenderedEventArgs`):

• Index (int): The index of the rendered step.
• Step (int): The step element that is being rendered.

Event Handling Patterns

Complete Workflow Example

@using Syncfusion.Blazor.Navigations

<div class="checkout-wizard">
    <SfStepper @ref="stepper" 
               Linear="true"
               ActiveStep="@currentStep"
               StepChanging="@OnStepChanging"
               StepChanged="@OnStepChanged"
               StepClicked="@OnStepClicked">
        <StepperSteps>
            <StepperStep Label="Cart" IconCss="sf-icon-cart"></StepperStep>
            <StepperStep Label="Shipping" IconCss="sf-icon-transport"></StepperStep>
            <StepperStep Label="Payment" IconCss="sf-icon-payment"></StepperStep>
            <StepperStep Label="Review" IconCss="sf-icon-success"></StepperStep>
        </StepperSteps>
    </SfStepper>
    
    <div class="step-content">
        @if (currentStep == 0)
        {
            <div>
                <h3>Shopping Cart</h3>
                <p>Review your items</p>
            </div>
        }
        else if (currentStep == 1)
        {
            <div>
                <h3>Shipping Address</h3>
                <p>Enter shipping details</p>
            </div>
        }
        else if (currentStep == 2)
        {
            <div>
                <h3>Payment Information</h3>
                <p>Enter payment details</p>
            </div>
        }
        else if (currentStep == 3)
        {
            <div>
                <h3>Order Review</h3>
                <p>Confirm your order</p>
            </div>
        }
    </div>
    
    <div class="validation-message" style="@(string.IsNullOrEmpty(validationMessage) ? "display:none;" : "")">
        @validationMessage
    </div>
</div>

@code {
    private SfStepper stepper;
    private int currentStep = 0;
    private string validationMessage = "";
    private bool[] stepValidation = new bool[] { true, false, false, true };
    
    private void OnStepChanging(StepperChangeEventArgs args)
    {
        validationMessage = "";
        
        // Validate only when moving forward
        if (args.ActiveStep > args.PreviousStep)
        {
            if (!stepValidation[args.PreviousStep])
            {
                args.Cancel = true;
                validationMessage = $"Please complete Step {args.PreviousStep + 1} before proceeding.";
            }
        }
    }
    
    private void OnStepChanged(StepperChangedEventArgs args)
    {
        currentStep = args.ActiveStep;
        Console.WriteLine($"Successfully moved to step {currentStep + 1}");
    }
    
    private void OnStepClicked(StepperClickedEventArgs args)
    {
        Console.WriteLine($"User clicked on step {args.Step + 1}");
    }
}

<style>
    .checkout-wizard {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
    }
    
    .step-content {
        margin-top: 40px;
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 4px;
        min-height: 150px;
    }
    
    .validation-message {
        margin-top: 20px;
        padding: 15px;
        background-color: #fee;
        border: 1px solid #fcc;
        border-radius: 4px;
        color: #c33;
    }
</style>

Async Event Handling

private async Task OnStepChangedAsync(StepperChangedEventArgs args)
{
    // Load data asynchronously for the new step
    await LoadStepDataAsync(args.ActiveStep);
}

private async Task LoadStepDataAsync(int stepIndex)
{
    // Simulate API call
    await Task.Delay(500);
    Console.WriteLine($"Data loaded for step {stepIndex}");
}

Common Patterns Summary

Getting Started with Blazor Stepper

Table of Contents

• Installation and Setup
• Blazor Web App Setup
• Namespaces
• Service Registration
• Theme & Script References
• Basic Examples
• CSS Themes
• Troubleshooting

Installation and Setup

Prerequisites

• Visual Studio 2022 or Visual Studio Code
• .NET SDK (latest version)
• Syncfusion Blazor license or trial

Step 1: Create a Blazor WebAssembly App

Create a new Blazor WebAssembly application using Visual Studio templates or the .NET CLI:

dotnet new blazorwasm -o BlazorApp
cd BlazorApp

Step 2: Install NuGet Packages

Install the required Syncfusion NuGet packages:

Using Package Manager Console:

Install-Package Syncfusion.Blazor.Navigations
Install-Package Syncfusion.Blazor.Themes

Using .NET CLI:

dotnet add package Syncfusion.Blazor.Navigations
dotnet add package Syncfusion.Blazor.Themes
dotnet restore

Step 3: Add Imports

Open _Imports.razor and add the required namespaces:

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Navigations

Step 4: Register Syncfusion Service

In Program.cs, register the Syncfusion Blazor service:

using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Syncfusion.Blazor;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

// Register Syncfusion Blazor Service
builder.Services.AddSyncfusionBlazor();
await builder.Build().RunAsync();

Step 5: Add Theme and Script References

In index.html, add the stylesheet and script references within the <head> section:

<head>
    <!-- ... other head elements ... -->
    <link href="_content/Syncfusion.Blazor.Themes/material3.css" rel="stylesheet" />
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
</head>

Blazor Web App Setup

For modern Blazor Web App projects (with Auto, WebAssembly, or Server render modes):

Create Blazor Web App

Using Visual Studio: 1. Create a Blazor Web App project 2. Configure Interactive Render Mode (Auto, WebAssembly, or Server) 3. Select location (Server or Client)

Using .NET CLI:

dotnet new blazor -o BlazorWebApp -int Auto
cd BlazorWebApp
cd BlazorWebApp.Client

Install Packages (Web App)

Install packages in the client project (for WebAssembly/Auto modes):

Install-Package Syncfusion.Blazor.Navigations
Install-Package Syncfusion.Blazor.Themes

Register Services (Web App)

Server-side (Program.cs):

using Syncfusion.Blazor;

builder.Services.AddSyncfusionBlazor();
builder.Services.AddRazorComponents()
    .AddInteractiveWebAssemblyComponents();

Client-side (_Program.cs in client project):

using Syncfusion.Blazor;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.Services.AddSyncfusionBlazor();
await builder.Build().RunAsync();

Enable Interactive Rendering

Add @rendermode InteractiveAuto in your Razor page:

@rendermode InteractiveAuto
@page "/"

<MyStepper />

Namespaces

Add these using statements in _Imports.razor:

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Navigations

Service Registration

See Installation and Setup or Blazor Web App Setup sections above for service registration details.

Theme & Script References

Add to index.html <head> section:

<link href="_content/Syncfusion.Blazor.Themes/material3.css" rel="stylesheet" />
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"></script>

Basic Examples

Minimal Example

@using Syncfusion.Blazor.Navigations

<SfStepper>
    <StepperSteps>
        <StepperStep></StepperStep>
        <StepperStep></StepperStep>
        <StepperStep></StepperStep>
        <StepperStep></StepperStep>
    </StepperSteps>
</SfStepper>

Example with Icons and Labels

@using Syncfusion.Blazor.Navigations

<SfStepper>
    <StepperSteps>
        <StepperStep Label="Cart" IconCss="sf-icon-cart"></StepperStep>
        <StepperStep Label="Address" IconCss="sf-icon-user"></StepperStep>
        <StepperStep Label="Delivery" IconCss="sf-icon-transport"></StepperStep>
        <StepperStep Label="Payment" IconCss="sf-icon-payment"></StepperStep>
        <StepperStep Label="Ordered" IconCss="sf-icon-success"></StepperStep>
    </StepperSteps>
</SfStepper>

<style>
    @@font-face {
        font-family: 'Default';
        src: url(data:application/x-font-ttf;charset=utf-8;base64,...) format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    [class^="sf-icon-"], [class*=" sf-icon-"] {
        font-family: 'Default' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: inherit;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .sf-icon-cart:before { content: "\e710"; }
    .sf-icon-user:before { content: "\e708"; }
    .sf-icon-transport:before { content: "\e702"; }
    .sf-icon-payment:before { content: "\e706"; }
    .sf-icon-success:before { content: "\e715"; }
</style>

Example with Text Content

@using Syncfusion.Blazor.Navigations

<SfStepper StepType="StepperType.Indicator">
    <StepperSteps>
        <StepperStep Text="A"></StepperStep>
        <StepperStep Text="B"></StepperStep>
        <StepperStep Text="C"></StepperStep>
        <StepperStep Text="D"></StepperStep>
    </StepperSteps>
</SfStepper>

<SfStepper ID="labelStepper">
    <StepperSteps>
        <StepperStep Label="Cart"></StepperStep>
        <StepperStep Label="Delivery"></StepperStep>
        <StepperStep Label="Payment"></StepperStep>
        <StepperStep Label="Confirmation"></StepperStep>
    </StepperSteps>
</SfStepper>

<style>
    #labelStepper {
        margin-top: 50px;
    }
</style>

CSS Themes

Syncfusion provides multiple theme options. Change the theme by replacing the stylesheet in index.html:

Available Themes:

• material3.css - Material Design 3 (default)
• bootstrap5.css - Bootstrap 5 theme
• fluent.css - Microsoft Fluent theme
• tailwind.css - Tailwind CSS theme
• fabric.css - Office Fabric theme

Example with Bootstrap 5 theme:

<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />

First Render

After implementing the Stepper component, press Ctrl+F5 (Windows) or Cmd+F5 (macOS) to launch the application. The Stepper will render horizontally by default with all steps visible and the first step active.

Troubleshooting

Issue: Component not rendering

• Solution: Verify that the theme stylesheet is correctly referenced in index.html

Issue: Icons not displaying

• Solution: Ensure the font-face CSS is included and the IconCss property references valid icon classes

Issue: Script errors in console

• Solution: Check that the Syncfusion script reference in index.html is correct and the file exists

Next Steps

• Explore step types and label positioning in Step Types and Configuration
• Add event handlers for step progression
• Implement custom templates for advanced layouts
• Enable validation for form-based workflows

Orientations and Layouts

Table of Contents

• Horizontal Orientation
• Basic Horizontal Stepper
• Responsive Horizontal Layout
• Vertical Orientation
• Basic Vertical Stepper
• Vertical Stepper with Content Panel
• Linear Flow
• Basic Linear Flow
• Linear Flow with Validation
• Non-Linear Flow
• Basic Non-Linear Flow
• Non-Linear with Skip Navigation
• Responsive Layout Strategy
• Mobile-First Responsive Layout
• Adaptive Label Display
• Layout Combinations
• Horizontal Stepper with Vertical Content

Horizontal Orientation

Horizontal orientation is the default layout for the Stepper component, displaying steps from left to right.

Basic Horizontal Stepper

@using Syncfusion.Blazor.Navigations

<SfStepper Orientation="StepperOrientation.Horizontal">
    <StepperSteps>
        <StepperStep Label="Step 1" IconCss="sf-icon-cart"></StepperStep>
        <StepperStep Label="Step 2" IconCss="sf-icon-transport"></StepperStep>
        <StepperStep Label="Step 3" IconCss="sf-icon-payment"></StepperStep>
        <StepperStep Label="Step 4" IconCss="sf-icon-success"></StepperStep>
    </StepperSteps>
</SfStepper>

Best For: Desktop applications, wide screens, horizontal workflows.

Responsive Horizontal Layout

@using Syncfusion.Blazor.Navigations

<div class="stepper-container">
    <SfStepper Orientation="StepperOrientation.Horizontal">
        <StepperSteps>
            <StepperStep Label="Personal"></StepperStep>
            <StepperStep Label="Address"></StepperStep>
            <StepperStep Label="Payment"></StepperStep>
            <StepperStep Label="Confirm"></StepperStep>
        </StepperSteps>
    </SfStepper>
</div>

<style>
    .stepper-container {
        width: 100%;
        overflow-x: auto;
    }
    
    /* Responsive behavior */
    @media (max-width: 768px) {
        .stepper-container {
            transform: scale(0.9);
            transform-origin: left top;
        }
    }
    
    @media (max-width: 480px) {
        .stepper-container {
            transform: scale(0.75);
            transform-origin: left top;
        }
    }
</style>

Vertical Orientation

Vertical orientation displays steps from top to bottom, ideal for mobile devices or sidebar layouts.

Basic Vertical Stepper

@using Syncfusion.Blazor.Navigations

<SfStepper Orientation="StepperOrientation.Vertical">
    <StepperSteps>
        <StepperStep Label="Step 1" IconCss="sf-icon-cart"></StepperStep>
        <StepperStep Label="Step 2" IconCss="sf-icon-transport"></StepperStep>
        <StepperStep Label="Step 3" IconCss="sf-icon-payment"></StepperStep>
        <StepperStep Label="Step 4" IconCss="sf-icon-success"></StepperStep>
    </StepperSteps>
</SfStepper>

Best For: Mobile layouts, sidebar navigation, long workflows.

Vertical Stepper with Content Panel

@using Syncfusion.Blazor.Navigations

<div class="vertical-layout">
    <div class="stepper-sidebar">
        <SfStepper @ref="stepper" 
                   Orientation="StepperOrientation.Vertical"
                   ActiveStep="@currentStep"
                   StepChanged="OnStepChanged">
            <StepperSteps>
                <StepperStep Label="Personal Information" IconCss="sf-icon-user"></StepperStep>
                <StepperStep Label="Address Details" IconCss="sf-icon-location"></StepperStep>
                <StepperStep Label="Payment Method" IconCss="sf-icon-payment"></StepperStep>
                <StepperStep Label="Review & Submit" IconCss="sf-icon-success"></StepperStep>
            </StepperSteps>
        </SfStepper>
    </div>
    
    <div class="content-panel">
        @if (currentStep == 0)
        {
            <h3>Personal Information</h3>
            <div class="form-fields">
                <input placeholder="Full Name" />
                <input placeholder="Email Address" />
            </div>
        }
        else if (currentStep == 1)
        {
            <h3>Address Details</h3>
            <div class="form-fields">
                <input placeholder="Street Address" />
                <input placeholder="City" />
            </div>
        }
        else if (currentStep == 2)
        {
            <h3>Payment Method</h3>
            <div class="form-fields">
                <input placeholder="Card Number" />
                <input placeholder="Expiry Date" />
            </div>
        }
        else if (currentStep == 3)
        {
            <h3>Review & Submit</h3>
            <p>Please review your information and click Submit to complete.</p>
        }
    </div>
</div>

@code {
    private SfStepper stepper;
    private int currentStep = 0;
    
    private void OnStepChanged(StepperChangedEventArgs args)
    {
        currentStep = args.ActiveStep;
    }
}

<style>
    .vertical-layout {
        display: flex;
        gap: 20px;
        height: 100vh;
    }
    
    .stepper-sidebar {
        flex: 0 0 250px;
        padding: 20px;
        background-color: #f5f5f5;
        border-right: 1px solid #ddd;
        overflow-y: auto;
    }
    
    .content-panel {
        flex: 1;
        padding: 40px;
        overflow-y: auto;
    }
    
    .content-panel h3 {
        margin-top: 0;
        margin-bottom: 20px;
        color: #333;
    }
    
    .form-fields {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    
    .form-fields input {
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
    }
    
    /* Responsive */
    @media (max-width: 768px) {
        .vertical-layout {
            flex-direction: column;
            height: auto;
        }
        
        .stepper-sidebar {
            flex: none;
            border-right: none;
            border-bottom: 1px solid #ddd;
        }
    }
</style>

Linear Flow

Linear flow enforces sequential step progression. Users can only move forward through completed steps or backward to previous steps, but cannot skip steps.

Basic Linear Flow

@using Syncfusion.Blazor.Navigations

<SfStepper Linear="true">
    <StepperSteps>
        <StepperStep Label="Step 1"></StepperStep>
        <StepperStep Label="Step 2"></StepperStep>
        <StepperStep Label="Step 3"></StepperStep>
        <StepperStep Label="Step 4"></StepperStep>
    </StepperSteps>
</SfStepper>

Best For: Wizards, forms where sequence matters, mandatory workflows.

Linear Flow with Validation

@using Syncfusion.Blazor.Navigations

<SfStepper @ref="stepper" Linear="true" StepChanging="@ValidateStep">
    <StepperSteps>
        <StepperStep Label="Basic Information"></StepperStep>
        <StepperStep Label="Contact Details"></StepperStep>
        <StepperStep Label="Verification"></StepperStep>
        <StepperStep Label="Confirmation"></StepperStep>
    </StepperSteps>
</SfStepper>

<div class="step-content">
    @if (currentStep == 0)
    {
        <div>
            <input @bind="basicInfo" placeholder="Enter basic info" />
        </div>
    }
    else if (currentStep == 1)
    {
        <div>
            <input @bind="contactInfo" placeholder="Enter contact info" />
        </div>
    }
</div>

@code {
    private SfStepper stepper;
    private int currentStep = 0;
    private string basicInfo = "";
    private string contactInfo = "";
    
    private void ValidateStep(StepperChangeEventArgs args)
    {
        // Only allow forward navigation if current step is valid
        if (args.ActiveStep > args.PreviousStep)
        {
            bool isValid = args.PreviousStep switch
            {
                0 => !string.IsNullOrEmpty(basicInfo),
                1 => !string.IsNullOrEmpty(contactInfo),
                _ => true
            };
            
            args.Cancel = !isValid;
        }
    }
}

Non-Linear Flow

Non-linear flow allows users to navigate to any step without restrictions. Users can jump between steps and explore the workflow in any order.

Basic Non-Linear Flow

@using Syncfusion.Blazor.Navigations

<SfStepper Linear="false">
    <StepperSteps>
        <StepperStep Label="Overview"></StepperStep>
        <StepperStep Label="Features"></StepperStep>
        <StepperStep Label="Pricing"></StepperStep>
        <StepperStep Label="Support"></StepperStep>
    </StepperSteps>
</SfStepper>

Best For: Documentation navigation, exploratory workflows, settings pages.

Non-Linear with Skip Navigation

@using Syncfusion.Blazor.Navigations

<SfStepper @ref="stepper" Linear="false">
    <StepperSteps>
        <StepperStep Label="Quick Start"></StepperStep>
        <StepperStep Label="Advanced Configuration"></StepperStep>
        <StepperStep Label="Integration"></StepperStep>
        <StepperStep Label="API Reference"></StepperStep>
    </StepperSteps>
</SfStepper>

<div class="navigation-buttons">
    <button @onclick="@(() => JumpToStep(0))">Quick Start</button>
    <button @onclick="@(() => JumpToStep(1))">Configuration</button>
    <button @onclick="@(() => JumpToStep(2))">Integration</button>
    <button @onclick="@(() => JumpToStep(3))">API Docs</button>
</div>

@code {
    private SfStepper stepper;
    
    private async Task JumpToStep(int stepIndex)
    {
        // Set the active step directly by incrementally navigating
        while (stepper.ActiveStep < stepIndex)
        {
            await stepper.NextStepAsync();
        }
        while (stepper.ActiveStep > stepIndex)
        {
            await stepper.PreviousStepAsync();
        }
    }
}

<style>
    .navigation-buttons {
        display: flex;
        gap: 10px;
        margin-top: 20px;
        flex-wrap: wrap;
    }
    
    .navigation-buttons button {
        padding: 8px 16px;
        background-color: #2196F3;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-weight: 600;
    }
    
    .navigation-buttons button:hover {
        background-color: #1976D2;
    }
</style>

Responsive Layout Strategy

Mobile-First Responsive Layout

@using Syncfusion.Blazor.Navigations

<SfStepper @ref="stepper" Orientation="@stepperOrientation">
    <StepperSteps>
        <StepperStep Label="Cart"></StepperStep>
        <StepperStep Label="Shipping"></StepperStep>
        <StepperStep Label="Payment"></StepperStep>
        <StepperStep Label="Review"></StepperStep>
    </StepperSteps>
</SfStepper>

@code {
    private SfStepper stepper;
    private StepperOrientation stepperOrientation = StepperOrientation.Vertical;
    
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // Handle window resize to switch orientation
            await HandleWindowResize();
        }
    }
    
    private async Task HandleWindowResize()
    {
        // In a real scenario, you'd use JavaScript interop to get window size
        // For now, we'll assume vertical on mobile, horizontal on desktop
        stepperOrientation = StepperOrientation.Vertical; // Default to vertical
        await InvokeAsync(StateHasChanged);
    }
}

<style>
    /* Mobile (vertical by default) */
    @media (max-width: 768px) {
        .e-stepper {
            width: 100%;
        }
    }
    
    /* Tablet and above (switch to horizontal) */
    @media (min-width: 769px) {
        /* Stepper will automatically be horizontal */
    }
</style>

Adaptive Label Display

@using Syncfusion.Blazor.Navigations

<SfStepper @ref="stepper" 
           Orientation="@stepperOrientation"
           LabelPosition="@labelPosition">
    <StepperSteps>
        <StepperStep Label="Order Details"></StepperStep>
        <StepperStep Label="Shipping Address"></StepperStep>
        <StepperStep Label="Payment Information"></StepperStep>
        <StepperStep Label="Order Summary"></StepperStep>
    </StepperSteps>
</SfStepper>

@code {
    private SfStepper stepper;
    private StepperOrientation stepperOrientation = StepperOrientation.Horizontal;
    private StepperLabelPosition labelPosition = StepperLabelPosition.Bottom;
    
    protected override void OnInitialized()
    {
        // Set initial orientation based on screen size
        UpdateOrientation();
    }
    
    private void UpdateOrientation()
    {
        // In production, use JavaScript interop to get window size
        // For demo, assume desktop
        stepperOrientation = StepperOrientation.Horizontal;
        labelPosition = StepperLabelPosition.Bottom;
    }
}

<style>
    /* Mobile: Vertical stepper, labels on side */
    @media (max-width: 480px) {
        .e-stepper {
            width: 100%;
        }
        
        .e-step {
            margin: 15px 0;
        }
    }
    
    /* Tablet: Horizontal stepper, labels at bottom */
    @media (min-width: 481px) and (max-width: 768px) {
        .e-stepper-progressbar {
            display: none;
        }
    }
    
    /* Desktop: Full horizontal layout */
    @media (min-width: 769px) {
        .e-stepper {
            display: flex;
            justify-content: center;
        }
    }
</style>

Layout Combinations

Horizontal Stepper with Vertical Content

@using Syncfusion.Navigations

<div class="layout-container">
    <SfStepper Orientation="StepperOrientation.Horizontal">
        <StepperSteps>
            <StepperStep Label="Step 1"></StepperStep>
            <StepperStep Label="Step 2"></StepperStep>
            <StepperStep Label="Step 3"></StepperStep>
        </StepperSteps>
    </SfStepper>
    
    <div class="vertical-content">
        <div class="content-section">Content for Step 1</div>
        <div class="content-section">Content for Step 2</div>
        <div class="content-section">Content for Step 3</div>
    </div>
</div>

<style>
    .layout-container {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
    
    .vertical-content {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    
    .content-section {
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 4px;
        background-color: #fafafa;
    }
</style>

Step Types and Configuration

Table of Contents

• Default Type
• Label Type
• Indicator Type
• Label Positioning
• Optional and Disabled Steps
• Active Step Control
• Step Status
• Read-Only Mode
• Linear Flow

Default Type

The default type displays steps with both indicators and labels, providing maximum clarity about step content and progress.

Usage: Set StepType to StepperType.Default (or omit it, as this is the default)

@using Syncfusion.Blazor.Navigations

<SfStepper StepType="StepperType.Default">
    <StepperSteps>
        <StepperStep Label="Cart" IconCss="sf-icon-cart"></StepperStep>
        <StepperStep Label="Delivery" IconCss="sf-icon-transport"></StepperStep>
        <StepperStep Label="Payment" IconCss="sf-icon-payment"></StepperStep>
        <StepperStep Label="Ordered" IconCss="sf-icon-success"></StepperStep>
    </StepperSteps>
</SfStepper>

Best For: Workflows where both visual indicators and text labels are important for clarity.

Label Type

The label type displays only the step labels, without icons or indicators. When both label and text are defined, the label takes priority.

Usage: Set StepType to StepperType.Label

@using Syncfusion.Blazor.Navigations

<SfStepper StepType="StepperType.Label">
    <StepperSteps>
        <StepperStep Label="Cart"></StepperStep>
        <StepperStep Label="Delivery"></StepperStep>
        <StepperStep Label="Payment"></StepperStep>
        <StepperStep Label="Ordered"></StepperStep>
    </StepperSteps>
</SfStepper>

Best For: Text-focused workflows with limited horizontal space or minimalist designs.

Indicator Type

The indicator type displays only the step indicators (icons or numbers), without labels. This is useful for compact layouts or when step context is clear from the surrounding UI.

Usage: Set StepType to StepperType.Indicator

@using Syncfusion.Blazor.Navigations

<SfStepper StepType="StepperType.Indicator">
    <StepperSteps>
        <StepperStep IconCss="sf-icon-cart"></StepperStep>
        <StepperStep IconCss="sf-icon-transport"></StepperStep>
        <StepperStep IconCss="sf-icon-payment"></StepperStep>
        <StepperStep IconCss="sf-icon-success"></StepperStep>
    </StepperSteps>
</SfStepper>

With Numeric Indicators:

<SfStepper StepType="StepperType.Indicator">
    <StepperSteps>
        <StepperStep Text="1"></StepperStep>
        <StepperStep Text="2"></StepperStep>
        <StepperStep Text="3"></StepperStep>
        <StepperStep Text="4"></StepperStep>
    </StepperSteps>
</SfStepper>

Best For: Space-constrained layouts, mobile interfaces, or icon-driven designs.

Label Positioning

Control where step labels appear relative to indicators using the LabelPosition property.

Available Positions:

• StepperLabelPosition.Top - Label above the indicator (default)
• StepperLabelPosition.Bottom - Label below the indicator
• StepperLabelPosition.Start - Label to the left of the indicator
• StepperLabelPosition.End - Label to the right of the indicator

@using Syncfusion.Blazor.Navigations

<div id="container">
    <div class="e-btn-group">
        <input type="radio" id="start" name="position" value="start" 
               @oninput="@(() => updateLabelPosition("Start"))" checked />
        <label class="e-btn" for="start">Start</label>
        <input type="radio" id="end" name="position" value="end" 
               @oninput="@(() => updateLabelPosition("End"))" />
        <label class="e-btn" for="end">End</label>
        <input type="radio" id="top" name="position" value="top" 
               @oninput="@(() => updateLabelPosition("Top"))" />
        <label class="e-btn" for="top">Top</label>
        <input type="radio" id="bottom" name="position" value="bottom" 
               @oninput="@(() => updateLabelPosition("Bottom"))" />
        <label class="e-btn" for="bottom">Bottom</label>
    </div>
    <SfStepper LabelPosition="@labelPosition">
        <StepperSteps>
            <StepperStep Label="Cart" IconCss="sf-icon-cart"></StepperStep>
            <StepperStep Label="Delivery" IconCss="sf-icon-transport"></StepperStep>
            <StepperStep Label="Payment" IconCss="sf-icon-payment"></StepperStep>
            <StepperStep Label="Confirmation" IconCss="sf-icon-success"></StepperStep>
        </StepperSteps>
    </SfStepper>
</div>

@code {
    private StepperLabelPosition labelPosition = StepperLabelPosition.Start;
    
    private void updateLabelPosition(string val)
    {
        labelPosition = val == "Start" ? StepperLabelPosition.Start : 
                       val == "End" ? StepperLabelPosition.End : 
                       val == "Top" ? StepperLabelPosition.Top : 
                       StepperLabelPosition.Bottom;
    }
}

<style>
    #container {
        text-align: center;
    }
</style>

Best For: Adapting to different screen sizes or design requirements (e.g., vertical stepper with labels on the side).

Optional and Disabled Steps

Optional Steps

Mark steps as optional using the Optional property. Optional steps can be skipped in linear workflows.

<SfStepper>
    <StepperSteps>
        <StepperStep Label="Required Step" IconCss="sf-icon-cart"></StepperStep>
        <StepperStep Label="Optional Step" IconCss="sf-icon-transport" Optional="true"></StepperStep>
        <StepperStep Label="Required Step" IconCss="sf-icon-payment"></StepperStep>
        <StepperStep Label="Required Step" IconCss="sf-icon-success"></StepperStep>
    </StepperSteps>
</SfStepper>

When to Use: Multi-step forms where certain steps are conditional (e.g., gift wrapping, special requests).

Disabled Steps

Prevent interaction with steps using the Disabled property. Disabled steps cannot be clicked or activated by users.

<SfStepper>
    <StepperSteps>
        <StepperStep Label="Step 1" IconCss="sf-icon-cart"></StepperStep>
        <StepperStep Label="Step 2" IconCss="sf-icon-transport"></StepperStep>
        <StepperStep Label="Step 3 (Disabled)" IconCss="sf-icon-payment" Disabled="true"></StepperStep>
        <StepperStep Label="Step 4" IconCss="sf-icon-success"></StepperStep>
    </StepperSteps>
</SfStepper>

When to Use: Steps that are not yet available or require prior completion (e.g., payment step until shipping is selected).

Active Step Control

Set the currently active step using the ActiveStep property (0-indexed). The first step (index 0) is active by default.

<SfStepper ActiveStep="1">
    <StepperSteps>
        <StepperStep Label="Step 1" IconCss="sf-icon-cart"></StepperStep>
        <StepperStep Label="Step 2 (Active)" IconCss="sf-icon-transport"></StepperStep>
        <StepperStep Label="Step 3" IconCss="sf-icon-payment"></StepperStep>
        <StepperStep Label="Step 4" IconCss="sf-icon-success"></StepperStep>
    </StepperSteps>
</SfStepper>

Programmatic Control:

@using Syncfusion.Blazor.Navigations

<SfStepper @ref="stepper">
    <StepperSteps>
        <StepperStep Label="Step 1"></StepperStep>
        <StepperStep Label="Step 2"></StepperStep>
        <StepperStep Label="Step 3"></StepperStep>
    </StepperSteps>
</SfStepper>

<button @onclick="NextStep">Next Step</button>

@code {
    private SfStepper stepper;
    
    private async Task NextStep()
    {
        // Programmatically change the active step
        if (stepper.ActiveStep < 2) // Assuming 3 steps (0-2)
        {
            await stepper.NextStepAsync();
        }
    }
}

Step Status

Each step can display a completion status using the Status property. This provides visual feedback on the state of each step.

Available Status Values:

• StepperStatus.NotStarted - Step not yet started (default)
• StepperStatus.InProgress - Step currently in progress
• StepperStatus.Completed - Step completed successfully

@using Syncfusion.Blazor.Navigations

<SfStepper ID="stepper" StepChanged="StepChanged">
    <StepperSteps>
        <StepperStep Label="Cart" IconCss="sf-icon-cart"></StepperStep>
        <StepperStep @ref="paymentStep" Label="Payment" IconCss="sf-icon-payment"></StepperStep>
        <StepperStep Label="Ordered" IconCss="sf-icon-success"></StepperStep>
    </StepperSteps>
</SfStepper>

<div id="statusDisplay">@statusMessage</div>

@code {
    private StepperStep paymentStep;
    private string statusMessage = "";
    
    public void StepChanged()
    {
        // Update status message based on payment step status
        statusMessage = paymentStep.Status switch
        {
            StepperStatus.NotStarted => "Payment has not started",
            StepperStatus.InProgress => "Processing payment...",
            StepperStatus.Completed => "Payment successful",
            _ => "Unknown status"
        };
    }
}

<style>
    #statusDisplay {
        margin-top: 20px;
        padding: 10px;
        background-color: #f0f0f0;
        border-radius: 4px;
        text-align: center;
        font-weight: bold;
    }
</style>

Best For: Providing real-time feedback on workflow progress or indicating error states for validation.

Read-Only Mode

Disable all user interactions with the Stepper using the ReadOnly property:

<SfStepper ReadOnly="true">
    <StepperSteps>
        <StepperStep Label="Step 1" IconCss="sf-icon-cart"></StepperStep>
        <StepperStep Label="Step 2" IconCss="sf-icon-transport"></StepperStep>
        <StepperStep Label="Step 3" IconCss="sf-icon-payment"></StepperStep>
        <StepperStep Label="Step 4" IconCss="sf-icon-success"></StepperStep>
    </StepperSteps>
</SfStepper>

When to Use: Displaying a read-only progress view or preview of a completed workflow.

Linear Flow

Enforce sequential step progression using the Linear property. Users can only move to the next step after completing the current one.

<SfStepper Linear="true">
    <StepperSteps>
        <StepperStep Label="Step 1" IconCss="sf-icon-cart"></StepperStep>
        <StepperStep Label="Step 2" IconCss="sf-icon-transport"></StepperStep>
        <StepperStep Label="Step 3" IconCss="sf-icon-payment"></StepperStep>
        <StepperStep Label="Step 4" IconCss="sf-icon-success"></StepperStep>
    </StepperSteps>
</SfStepper>

Best For: Wizard-style forms where step sequence is critical to the workflow.

Templates and Styling

Table of Contents

• Custom Step Templates
• Template Basics
• Custom Styling with Templates
• Icon and Label Customization
• CSS Styling
• Built-in CSS Classes
• Custom CSS Classes
• Theme Customization
• Custom CSS Styling

Custom Step Templates

The Stepper component supports custom templates for advanced layouts. Use the Template tag directive to customize how steps are rendered.

Template Basics

@using Syncfusion.Blazor.Navigations

<SfStepper ActiveStep="1">
    <ChildContent>
        <StepperSteps>
            <StepperStep Label="PowerPoint" IconCss="sf-icon-powerpoint"></StepperStep>
            <StepperStep Label="Presentation" IconCss="sf-icon-projector"></StepperStep>
            <StepperStep Label="Backup" IconCss="sf-icon-onedrive"></StepperStep>
        </StepperSteps>
    </ChildContent>
    <Template>
        <div class="template-content">
            <span class="@context.IconCss"></span><br>
            <span class="e-label">@context.Label</span>
        </div>
    </Template>
</SfStepper>

<style>
    .template-content {
        background: #fff;
        width: 65px;
        text-align: center;
        padding: 10px;
    }
</style>

Template Context Properties

The template context provides access to the current step's properties:

• @context.Label - Step label text
• @context.Text - Step text content
• @context.IconCss - Icon CSS class
• @context.Optional - Is step optional
• @context.Disabled - Is step disabled
• @context.Status - Current step status

CSS Styling and Customization

Using CssClass Property

Apply custom CSS to individual steps using the CssClass property:

@using Syncfusion.Blazor.Navigations

<SfStepper>
    <StepperSteps>
        <StepperStep Label="Required" IconCss="sf-icon-cart"></StepperStep>
        <StepperStep Label="Optional" IconCss="sf-icon-transport" Optional="true" CssClass="optional-step"></StepperStep>
        <StepperStep Label="Important" IconCss="sf-icon-payment" CssClass="important-step"></StepperStep>
        <StepperStep Label="Final" IconCss="sf-icon-success"></StepperStep>
    </StepperSteps>
</SfStepper>

<style>
    .optional-step .e-step-label-optional {
        font-style: italic;
        font-weight: 900;
        color: #299100;
    }
    
    .important-step .e-step-indicator {
        background-color: #ff6b6b !important;
        color: white;
    }
</style>

Stepper-Level CSS Classes

Customize the entire stepper appearance using CSS selectors:

@using Syncfusion.Blazor.Navigations

<SfStepper>
    <StepperSteps>
        <StepperStep Label="Step 1" IconCss="sf-icon-cart"></StepperStep>
        <StepperStep Label="Step 2" IconCss="sf-icon-transport"></StepperStep>
        <StepperStep Label="Step 3" IconCss="sf-icon-payment"></StepperStep>
    </StepperSteps>
</SfStepper>

<style>
    /* Stepper progress bar customization */
    .e-stepper .e-stepper-progressbar {
        height: 3px;
        top: 25px;
    }
    
    .e-stepper .e-stepper-progressbar .e-progressbar-value {
        background-color: #27d96d;
    }
    
    /* Stepper step status customization */
    .e-stepper .e-step-completed * {
        color: #19cd60;
    }
    
    .e-stepper .e-step-inprogress * {
        color: #3479f3;
    }
    
    .e-stepper .e-step-notstarted * {
        color: #bdbdbd;
    }
    
    /* Individual step styling */
    .e-stepper .e-step-indicator {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    
    .e-stepper .e-step-label {
        font-weight: 600;
        font-size: 14px;
    }
</style>

Progressive Styling

Create visual hierarchy with progressive styling:

@using Syncfusion.Blazor.Navigations

<SfStepper ID="progressiveStepper">
    <StepperSteps>
        <StepperStep Label="Getting Started"></StepperStep>
        <StepperStep Label="Configuration"></StepperStep>
        <StepperStep Label="Integration"></StepperStep>
        <StepperStep Label="Deployment"></StepperStep>
    </StepperSteps>
</SfStepper>

<style>
    #progressiveStepper .e-step {
        margin: 0 10px;
        transition: all 0.3s ease;
    }
    
    #progressiveStepper .e-step-completed .e-step-indicator {
        background-color: #4CAF50;
        box-shadow: 0 0 8px rgba(76, 175, 80, 0.4);
        transform: scale(1.1);
    }
    
    #progressiveStepper .e-step-inprogress .e-step-indicator {
        background-color: #2196F3;
        box-shadow: 0 0 12px rgba(33, 150, 243, 0.6);
        animation: pulse 1s infinite;
    }
    
    #progressiveStepper .e-step-notstarted .e-step-indicator {
        background-color: #bdbdbd;
        opacity: 0.6;
    }
    
    @keyframes pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.05); }
    }
</style>

Theme Customization

Theme Variables

Override Syncfusion theme CSS variables for custom styling:

<style>
    :root {
        /* Primary color */
        --e-primary: #1976D2;
        /* Text color */
        --e-text-color: #333333;
        /* Border color */
        --e-border-color: #CCCCCC;
    }
    
    .e-stepper .e-step-completed .e-step-indicator {
        background-color: var(--e-primary);
    }
</style>

Multiple Theme Support

Switch between themes dynamically:

@using Syncfusion.Blazor.Navigations

<div>
    <button @onclick="@(() => ApplyTheme("material"))">Material</button>
    <button @onclick="@(() => ApplyTheme("bootstrap"))">Bootstrap</button>
    <button @onclick="@(() => ApplyTheme("fabric"))">Fabric</button>
</div>

<SfStepper>
    <StepperSteps>
        <StepperStep Label="Step 1"></StepperStep>
        <StepperStep Label="Step 2"></StepperStep>
        <StepperStep Label="Step 3"></StepperStep>
    </StepperSteps>
</SfStepper>

@code {
    private void ApplyTheme(string themeName)
    {
        // Theme switching logic
        Console.WriteLine($"Applied {themeName} theme");
    }
}

Advanced Customization Examples

Stepper with Icons and Status

@using Syncfusion.Blazor.Navigations

<SfStepper @ref="stepper" ActiveStep="@currentStep" StepChanged="OnStepChanged">
    <StepperSteps>
        <StepperStep Label="Cart" IconCss="sf-icon-cart" CssClass="@(currentStep >= 0 ? "completed" : "pending")"></StepperStep>
        <StepperStep Label="Address" IconCss="sf-icon-user" CssClass="@(currentStep >= 1 ? "completed" : currentStep == 1 ? "current" : "pending")"></StepperStep>
        <StepperStep Label="Payment" IconCss="sf-icon-payment" CssClass="@(currentStep == 2 ? "current" : "pending")"></StepperStep>
        <StepperStep Label="Confirmation" IconCss="sf-icon-success" CssClass="@(currentStep == 3 ? "current" : "pending")"></StepperStep>
    </StepperSteps>
</SfStepper>

@code {
    private SfStepper stepper;
    private int currentStep = 0;
    
    private void OnStepChanged(StepperChangedEventArgs args)
    {
        currentStep = args.ActiveStep;
    }
}

<style>
    .e-step.completed .e-step-indicator {
        background-color: #4CAF50 !important;
        color: white;
    }
    
    .e-step.current .e-step-indicator {
        background-color: #2196F3 !important;
        color: white;
        box-shadow: 0 0 10px rgba(33, 150, 243, 0.5);
    }
    
    .e-step.pending .e-step-indicator {
        background-color: #E0E0E0;
        color: #999;
    }
    
    .e-step.completed .e-step-label {
        color: #4CAF50;
        font-weight: 600;
    }
    
    .e-step.current .e-step-label {
        color: #2196F3;
        font-weight: 700;
    }
</style>

Vertical Stepper with Custom Layout

@using Syncfusion.Blazor.Navigations

<div class="custom-stepper-wrapper">
    <SfStepper Orientation="StepperOrientation.Vertical" ActiveStep="@currentStep">
        <StepperSteps>
            <StepperStep Label="Personal Information" IconCss="sf-icon-user"></StepperStep>
            <StepperStep Label="Address Details" IconCss="sf-icon-location"></StepperStep>
            <StepperStep Label="Payment Method" IconCss="sf-icon-payment"></StepperStep>
            <StepperStep Label="Review & Submit" IconCss="sf-icon-success"></StepperStep>
        </StepperSteps>
    </SfStepper>
    
    <div class="stepper-content">
        <!-- Step content here -->
    </div>
</div>

@code {
    private int currentStep = 0;
}

<style>
    .custom-stepper-wrapper {
        display: flex;
        gap: 30px;
        padding: 20px;
    }
    
    .e-stepper {
        flex: 0 0 250px;
    }
    
    .stepper-content {
        flex: 1;
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 4px;
        background-color: #fafafa;
    }
</style>

Common CSS Selectors