# Templates

The Stepper allows you to use templates to customize the appearance of its steps.

To define a template, nest an `<ng-template>` tag inside the `<kendo-stepper>` tag and apply one of the following directives to it:

* `"kendoStepperIndicatorTemplate"`—Specifies the content of the step indicator.
* `"kendoStepperLabelTemplate"`—Specifies the content of the step label.
* `"kendoStepperStepTemplate"`—Completely overrides the content of the step. Allows you to fully customize the appearance of the steps.

> The purpose of each step is solely representational and informative. Thus, placing any interactive elements (such as inputs or buttons) inside the steps should be avoided, as it may cause UX discrepancies.

## Indicator Template

You can customize the look of the step indicator by using the `kendoStepperIndicatorTemplate` directive. Apply the directive to an `<ng-template>` tag nested within the `<kendo-stepper>` tag. The template context is set to the current step. To get a reference to the current step, use the `let-step` directive. The index of the current step is also available in the template through the `index` field.

> The step indicators are rendered when the `stepType` property is set to `indicator` or to `full`.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/layout/stepper/templates/indicator/source.txt)

## Label Template

When the `stepType` property is set to `label` or `full`, a label will be rendered for each step. You can customize the look of the step labels by using the `kendoStepperLabelTemplate`.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/layout/stepper/templates/label/source.txt)

## Step Template

To display custom content and override the appearance of the whole step, utilize the `kendoStepperStepTemplate`.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/layout/stepper/templates/step/source.txt)

## Suggested Links

* [API Reference of the Stepper](https://www.telerik.com/kendo-angular-ui/components/layout/api/steppercomponent)
* [Angular Stepper](https://www.telerik.com/kendo-angular-ui/stepper)