The KendoReact Stepper component enables developers to create a set of logical steps in sequential order and visualizes the progress throughout the steps. The content of each step is completely customizable, and the React Stepper contains built- in logic to prevent navigation until certain requirements are met.
With the KendoReact Stepper component there are several ways to display each step. This includes simple steps numbered in sequential order, to using icons or custom text within each step, as well as providing labels underneath each step. These different styles can be configured across the entire React component, or on a step-by-step basis.
Out of the box, the React Stepper allows for navigation between steps in any order and does not restrict steps being completed in order. There may be requirements that enforce a progression from the first to the last step in order, and this is where the linear mode of the KendoReact Stepper comes in to play. By enabling linear mode, steps must be completed in sequence, restricting users from random jumping between steps.
The KendoReact Stepper supports both horizontal and vertical orientations and can dynamically switch between them with a single configuration option.
By default, the KendoReact Stepper components utilizes a built-in layout and structure to display each step. For scenarios where this default layout is not enough, the steps can utilize a custom renderer to allow developers to take full control over the look and feel of each step.
By default, the React Drawer component will be rendered on the left-hand side, but for applications that require right-to-left display, the Drawer can easily be rendered on the right-hand side.
Highlighting, focusing and navigating through the steps of the KendoReact Stepper component can be done completely via the keyboard.
The KendoReact Stepper component is AAA rated with WCAG 2.0 and sports compliance with Section 508 and WAI-ARIA standards, ensuring that the component is fully compliant with modern accessibility guidelines.
See KendoReact in action and check out how much it can do out-of-the-box.
Try KendoReact with dedicated technical support.