Use the Blazor Stepper component to breakdown complex processes into smaller steps and easily track your progress. Implement custom icons, various fonts and colors, validation logic and benefit from the vertical and horizontal orientation settings.
This component is part of the largest truly native Blazor component suite - Telerik UI for Blazor designed to perfectly fit in any app’s requirement.
The Blazor UI suite also comes with professionally designed themes enabled with a flip of a switch, document processing library, rich docs & demos to help you get started in no time.
The Stepper control for Telerik UI for Blazor is designed to help you divide complicated actions in your web application into smaller steps. It enables you to create a sequence that visualizes progress and makes it easier to keep track of your advancement. The Stepper can also be used for navigation purposes, for example filling an online form with multiple categories, such as shopping cart, billing address and payment via a third-party service.
The Blazor UI Stepper can be configured in various ways. You can choose the step type you prefer, either steps with indicators and labels or just labels, which will alter the way steps are displayed in the component.
You can choose from vertical or horizontal orientation of the Stepper and further customize the way it looks. Depending on the selected orientation the label position and the indicator changes accordingly. For example, the label can be aligned with the number of the step or positioned next to it. The flow of the steps can be restricted to linear, meaning completion of a previous step would be required to proceed to the next one, or users can go back and forth only one step at a time.
The built-in Blazor Validation will be triggered whenever the Valid parameter is set. Based on it being either true or false, a success (check) or error icon will be rendered either in the step indicator or as a part of the label below each step. If the step validity is not specified, no icons will be shown. This makes it easier for users to track which step they have completed, and which requires more action from their side.
The Stepper component enables you to custom code after a step is selected. For example, depending on your selection – you can change the validity or enable/disable the step. The component currently executes only the ValueChange event which triggers when CurrentStepIndex has changed.
The Stepper component has several built-in themes such as Default (our own styling), Material (based on the Material Design guidelines) and Bootstrap (which looks like the Bootstrap styling to integrate better). Each theme predefines several series colors, so your data is visualized according to your design guidelines. You can further customize any of the out-of-the box themes, style a specific chart component or create new theme to match your colors and branding by using the Telerik SASS ThemeBuilder application.
Users can easily navigate the Stepper control using the arrow keys to move between the steps. Home and End buttons naturally focus the first and last steps and to select the focused step the users can either use Space or Enter.