KendoReact Stepper Overview

The KendoReact Stepper component enables the user to create a sequence of logical steps that visualizes progress.

It could also be used for navigation purposes.

The KendoReact Stepper component is part of the KendoReact library of React UI components. It is distributed through NPM under the kendo-react-layout package.


The following example demonstrates the Stepper in action.

Example
View Source
Change Theme:

The Stepper is part of the KendoReact Layout component library. The procedures for installing, importing, and using all components in the library are identical. To learn how to use the Stepper and the rest of the components in the package, see the Getting Started with the KendoReact Layout Package guide.

Key Features

  • Display ModesThe various display modes allow you to configure the step layout and type.
  • Linear ModeThe linear mode requires the user to complete the previous step before proceeding to the next one.
  • OrientationYou can switch between horizontal and vertical orientation.
  • ValidationYou can set the validation logic for each step.
  • Custom RenderingThe Stepper allows you to customize the rendering of each step.
  • Keyboard NavigationThe Stepper supports various keyboard shortcuts.
  • AccessibilityThe Stepper component is accessible by screen readers and provides full WAI-ARIA support.

Known Limitations

The Stepper component is not supported in IE 11 and below as its implementation relies entirely on the CSS Grid Layout.

In this article

Not finding the help you need?