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
csharp
@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
property to enforce sequential progression—users can only move to the next step after completing the current one.
csharp
<SfStepper Linear="true">
<!-- Steps -->
</SfStepper>
Active Step Control
Set the
property to control which step is currently active (0-indexed).
csharp
<SfStepper ActiveStep="1">
<!-- Steps -->
</SfStepper>
Tracking Step Changes
Handle the
event to respond when users navigate between steps.
csharp
<SfStepper StepChanged="@OnStepChanged">
<!-- Steps -->
</SfStepper>
@code {
private void OnStepChanged(StepperChangedEventArgs args)
{
// Handle step change
}
}
Validation States
Display success or error states using the
property on individual steps.
csharp
<StepperStep Label="Payment" IsValid="true"></StepperStep>
<StepperStep Label="Confirm" IsValid="false"></StepperStep>
Key Properties
| Property | Type | Purpose |
|---|
| | Sets the currently active step (0-indexed) |
| | Enforces sequential step progression |
| | Disables user interaction with the stepper |
| | Display format (Default, Label, Indicator) |
| | Layout direction (Horizontal, Vertical) |
| | Label placement (Top, Bottom, Start, End) |
Step Properties:
- : Display text for the step
- : Alternative text content
- : CSS class for custom icons
- : Prevents interaction with the step
- : Marks step as optional
- : Sets validation state (true/false/null)
- : Current state (NotStarted, InProgress, Completed)
- : 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.