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

Property	Type	Purpose
ActiveStep	int	Sets the currently active step (0-indexed)
LinearFlow	bool	Enforces sequential step progression
ReadOnly	bool	Disables user interaction with the stepper
StepType	StepperType	Display format (Default, Label, Indicator)
Orientation	StepperOrientation	Layout direction (Horizontal, Vertical)
LabelPosition	StepperLabelPosition	Label placement (Top, Bottom, Start, End)

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.