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
Edit In Stackblitz  
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
Edit In Stackblitz  
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
Edit In Stackblitz  
Change Theme:

Optional Steps

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
Edit In Stackblitz  
Change Theme:

Disabled Steps

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
Edit In Stackblitz  
Change Theme:

Step Template

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