React Stepper

Overview

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.

See React Stepper Overview demo

React Stepper - Overview, KendoReact UI Library

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.

See React Stepper Display Modes demo

React Stepper - Display Modes, KendoReact UI Library

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.

See React Stepper Linear Mode demo

React Stepper - Linear Mode, KendoReact UI Library

Orientation

The KendoReact Stepper supports both horizontal and vertical orientations and can dynamically switch between them with a single configuration option.

See React Stepper Orientation demo

React Stepper - Orientation, KendoReact UI Library

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.

See React Stepper Custom Rendering demo

React Stepper - Custom Rendering, KendoReact UI Library

Globalization

The React Stepper supports rendering the component and each step’s content in a right-to-left fashion, satisfying many globalization requirements.

See React Stepper Globalization demo

React Stepper - Globalization, KendoReact UI Library

Keyboard Navigation

Highlighting, focusing and navigating through the steps of the KendoReact Stepper component can be done completely via the keyboard.

See React Stepper Keyboard Navigation demo

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.

See React Stepper Accessibility demo

React Stepper - Accessibility, KendoReact UI Library

Next Steps

Visit Our Demos

See KendoReact in action and check out how much it can do out-of-the-box.

See Pricing

Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.

Start Free Trial

Try KendoReact with dedicated technical support.