New to Kendo UI for Angular? Start a free 30-day trial

Step Appearance

The Stepper provides a number of options for customizing the appearance of its steps.

To control the styling, use the following approaches for setting the steps:

Indicator Icon

The Stepper enables you to display icons inside the step indicators. Those can either be an existing icon in a Kendo UI theme or a custom one.

Example
View Source
Change Theme:

Indicator Text

The Stepper allows you to display custom text inside the step indicators instead of the default numeric one.

Example
View Source
Change Theme:

Current Step

To specify the current step of the Stepper, use the currentStep option. The property supports a 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 with the keyboard, the Stepper emits a preventable activate event. If prevented, the currentStep will remain unchanged.

Example
View Source
Change Theme:

Optional Step

You can also mark a step as optional by using the optional property. If set to true, the step will have an Optional label rendered under its indicator.

Example
View Source
Change Theme:

Disabled Step

The Stepper allows you to mark a step as disabled through the disabled property. Users can focus disabled steps through the keyboard navigation but these steps cannot be activated.

Example
View Source
Change Theme:

Step Template

For more information about the step templates, refer to the article on the Stepper templates.