Kendo UI for Angular Stepper Overview

The Kendo UI for Angular Stepper visualizes the progress of a process by dividing the content into logical steps.

It enables wizard-like workflow and supports multiple step types, linear flow, step validation, templates, and more.

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

The following example demonstrates the Stepper in action.

Example
View Source
Edit In Stackblitz  
Change Theme:

Key Features

  • TypesYou can display each step of the Stepper as a circle indicator, a text label, or a combination of the two.
  • AppearanceThe Stepper enables you to customize the appearance of its steps, for example, to display icons as indicators, add custom text inside the indicators, disable steps, and more.
  • ValidationThe Stepper allows you to implement validation logic and render a success or an error icon for previous steps.
  • Linear flowYou can override the default linear flow of steps and enable the user to access all stages of the process.
  • OrientationThe Stepper enables you to arrange its panes horizontally or vertically.
  • TemplatesYou can apply templates to display custom content and customize the appearance of the Stepper indicators, labels, and steps.
  • GlobalizationAll Kendo UI for Angular Layout components provide globalization options.
  • AccessibilityThe Stepper is accessible for screen readers and supports WAI-ARIA attributes.
  • Keyboard NavigationThe Stepper supports a number of keyboard shortcuts for processing various commands.

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?