Blazor Steps
The Blazor Steps component guides users through a multi-step process (wizard) with numbered stages.
1. Select a Customer to continue
Customer ID | Company Name | Contact Name | Contact Title | Address | City | Region | Postal Code | Country | Phone | Fax |
|---|---|---|---|---|---|---|---|---|---|---|
| ALFKI | Alfreds Futterkiste | Maria Anders | Sales Representative | Obere Str. 57 | Berlin | 12209 | Germany | 030-0074321 | 030-0076545 | |
| ANATR | Ana Trujillo Emparedados y helados | Ana Trujillo | Owner | Avda. de la Constitución 2222 | México D.F. | 05021 | Mexico | (5) 555-4729 | (5) 555-3745 | |
| ANTON | Antonio Moreno Taquería | Antonio Moreno | Owner | Mataderos 2312 | México D.F. | 05023 | Mexico | (5) 555-3932 | ||
| AROUT | Around the Horn | Thomas Hardy | Sales Representative | 120 Hanover Sq. | London | WA1 1DP | UK | (171) 555-7788 | (171) 555-6750 | |
| BERGS | Berglunds snabbköp | Christina Berglund | Order Administrator | Berguvsvägen 8 | Luleå | S-958 22 | Sweden | 0921-12 34 65 | 0921-12 34 67 | |
| BLAUS | Blauer See Delikatessen | Hanna Moos | Sales Representative | Forsterstr. 57 | Mannheim | 68306 | Germany | 0621-08460 | 0621-08924 | |
| BLONP | Blondesddsl père et fils | Frédérique Citeaux | Marketing Manager | 24, place Kléber | Strasbourg | 67000 | France | 88.60.15.31 | 88.60.15.32 | |
| BOLID | Bólido Comidas preparadas | Martín Sommer | Owner | C/ Araquil, 67 | Madrid | 28023 | Spain | (91) 555 22 82 | (91) 555 91 99 | |
| BONAP | Bon app' | Laurence Lebihan | Owner | 12, rue des Bouchers | Marseille | 13008 | France | 91.24.45.40 | 91.24.45.41 | |
| BOTTM | Bottom-Dollar Markets | Elizabeth Lincoln | Accounting Manager | 23 Tsawassen Blvd. | Tsawassen | BC | T2F 8M4 | Canada | (604) 555-4729 | (604) 555-3745 |
Console log
Transition link
Use the Transition parameter to animate the step content when switching between steps. Set it to StepsTransition.Fade for a fade-in effect or StepsTransition.Slide for a slide-in effect. Use TransitionDuration to control the animation speed.
Transition:
- None
- Fade
- Slide
Duration (ms):
Enter your personal information
CanChange event link
The CanChange event allows you to conditionally prevent the step change. Use it to ensure your users have entered all the required information before moving to the next step.
Enter user information
Keyboard Navigation link
The following keys or key combinations provide a way for users to navigate and interact with Radzen Blazor Steps component.
| Press this key | To do this |
|---|---|
| Tab | Move focus to the selected step. |
| Left Arrow | Move focus to the previous step, wrapping from the first step to the last. |
| Right Arrow | Move focus to the next step, wrapping from the last step to the first. |
| Home | Move focus to the first step. |
| End | Move focus to the last step. |
| Space or Enter | Select the focused step when step selection is allowed and the step is not disabled. |
Frequently asked questions
How do I build a wizard in Blazor?
Use RadzenSteps with RadzenStepsItem children; each step shows its content and you can validate before advancing.
Related
Radzen Blazor Newsletter
Get an email when new components and releases ship.
Save Hours on Every Project
With Radzen Blazor subscription you get the full toolkit, including:
Dedicated support backed by proven expertise
Premium themes and theme editor
Ready-to-use UI blocks
Complete app templates
Visual design-time-experience
Radzen Blazor Components, © 2018-2026 Radzen.
Source Code licensed under
MIT
On this page
- DataGridkeyboard_arrow_down
- Data-bindingkeyboard_arrow_down
- Virtualizationkeyboard_arrow_down
- Columnskeyboard_arrow_down
- Filteringkeyboard_arrow_down
- Hierarchykeyboard_arrow_down
- Selectionkeyboard_arrow_down
- Sortingkeyboard_arrow_down
- Pagingkeyboard_arrow_down
- Groupingkeyboard_arrow_down
- Custom Headerkeyboard_arrow_down
- Save/Load settingskeyboard_arrow_down
- Drag & Dropkeyboard_arrow_down
- Data Visualization Updated keyboard_arrow_down
- Configurationkeyboard_arrow_down
- Area Chartkeyboard_arrow_down
- Bar Chartkeyboard_arrow_down
- Column Chartkeyboard_arrow_down
- Line Chartkeyboard_arrow_down
- Waterfall Chartkeyboard_arrow_down
- Part-to-Whole Chartskeyboard_arrow_down
- Scatter & Bubblekeyboard_arrow_down
- Financial Chartskeyboard_arrow_down
- Statistical & Interactivekeyboard_arrow_down
- Gaugeskeyboard_arrow_down
- Zoom & Navigationkeyboard_arrow_down
- Formskeyboard_arrow_down
- DropDownkeyboard_arrow_down
- HtmlEditorkeyboard_arrow_down
- Spreadsheet New keyboard_arrow_down
- PivotDataGridkeyboard_arrow_down
- Document Processing New keyboard_arrow_down
- Datakeyboard_arrow_down
- DataListkeyboard_arrow_down
- DataFilterkeyboard_arrow_down
- Ganttkeyboard_arrow_down
- Treekeyboard_arrow_down
- Navigationkeyboard_arrow_down
- Layoutkeyboard_arrow_down
- UI Fundamentalskeyboard_arrow_down
- App Templateskeyboard_arrow_down
- UI Blocks Prokeyboard_arrow_down
- Imageskeyboard_arrow_down
- Feedbackkeyboard_arrow_down
- Alertkeyboard_arrow_down
- Validatorskeyboard_arrow_down
Demos Configuration
Premium Themes
- Material 3
- Material 3 Dark
- Material 3 Expressive
- Material 3 Expressive Dark
- Fluent
- Fluent Dark
Free Themes
- Material
- Material Dark
- Standard
- Standard Dark
- Default
- Dark
- Humanistic
- Humanistic Dark
- Software
- Software Dark