Step Appearance

The Stepper component provides the following options for customizing the appearance of the steps:

Indicator Icon

The Stepper enables you to display icons inside the step indicators. Those could be either existing icons in a Kendo UI theme or custom ones.

View Source
Edit In Stackblitz  
Change Theme:

Indicator Text

The Stepper allows displaying custom text content inside the step indicators instead of the default numeric one

Current Step

The current step of the Stepper is specified by using the currentStep option. The property supports two-way binding which is provided by the currentStepChange event.

When the user navigates to a step and activates it (either by mouse click or via keyboard), the Stepper emits a preventable activate event. If prevented, the currentStep will remain unchanged.

Optional Step

A step could be marked as optional by using the optional property. If set to true, the step will have an Optional label rendered under its indicator.

Disabled Step

A step could be marked as disabled by using the disabled property. Disabled steps can be focused through keyboard navigation, but they cannot be activated.

Templated Step

For more information about step templates, please check the Templates section of the documentation.

In this article

Not finding the help you need?