Blazor Stepper - Overview
- EXAMPLE
- VIEW SOURCE
- EDIT IN TELERIK REPL
- Change Theme
default
- Overview.razor
The Stepper component is part of Telerik UI for Blazor, a professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Description
The Telerik UI for Blazor Stepper component enables you to create a sequence of logical steps that help users navigate a lengthy process. Besides being a standalone component, the Stepper is also an integral part of the Wizard component.
The Stepper control is designed to help you divide complex 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 out an online form with multiple categories, such as shopping cart, billing address and payment via a third-party service.
The Blazor 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 between vertical or horizontal orientation and further customize the way the Stepper looks. Depending on the selected orientation, the label position and the indicator change 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.