Kendo UI for Vue Native Stepper Overview

The Kendo UI for Vue Native Stepper component enables the user to create a sequence of logical steps that visualizes progress.

It can also be used for navigation purposes.

The Stepper component is part of the Kendo UI for Vue library. It is distributed through NPM under the kendo-vue-layout package.

The Stepper is part of Kendo UI for Vue, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.Start Free Trial

The following example demonstrates the Stepper in action.

Change Theme

Theme

Loading ...

The Stepper is part of the Kendo UI for Vue 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 Kendo UI for Vue Layout Package guide.

Key Features

Display Modes—The various display modes allow you to configure the step layout and type.
Linear Mode—The linear mode requires the user to complete the previous step before proceeding to the next one.
Orientation—You can switch between horizontal and vertical orientation.
Validation—You can set the validation logic for each step.
Custom Rendering—The Stepper allows you to customize the rendering of each step.
Keyboard Navigation—The Stepper supports various keyboard shortcuts.
Accessibility—The Stepper component is accessible by screen readers and provides full WAI-ARIA support.
Events—The Stepper provides a set of events that help you tailor its behavior according to your project requirements.

Known Limitations

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

Kendo UI for Vue Native Stepper Overview

Key Features

Known Limitations

Support and Learning Resources

Additional Resources