KendoReact
React Stepper
- Visualize a process of multiple steps with the customizable React Stepper component.
- Part of the KendoReact library along with 120+ professionally-designed components.
- Includes support, documentation, demos, virtual classrooms, learning resources and more!
-
Create a Sequence of Logical Steps and Visualize the Progress
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.
-
Display Modes
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.
-
Linear Mode
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.
-
Orientation
The KendoReact Stepper supports both horizontal and vertical orientations and can dynamically switch between them with a single configuration option.
-
Validation
The KendoReact Stepper component allows you to setup a validation logic for each step. Depending on the result, a success or an error icon will be rendered. Additionally, you can customize the rendereded validation icons.
-
Custom Rendering
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.
-
Globalization
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.
-
Keyboard Navigation
Highlighting, focusing and navigating through the steps of the KendoReact Stepper component can be done completely via the keyboard.
-
Accessibility
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.
-
Other Supported Frameworks
The Stepper component is also available for these web development frameworks:
