# Label Directive

The Label directive can associates a focusable Angular components and HTML elements with a `<label>` HTML tag by using the [`for`](https://www.telerik.com/kendo-angular-ui-develop/components/labels/api/labeldirective#for) property binding.

To associate a component using Label directive set the `[for]` property binding:

* to a [template reference variable](https://angular.dev/guide/templates#template-reference-variables--var-):

  ```html
  <label [for]="datepicker">DatePicker: </label>
  <kendo-datepicker #datepicker></kendo-datepicker>
  ```

* to an `id` HTML string value:

  ```html
  <label for="input">Input: </label>
  <input id="input" />
  ```

The following example demonstrates both approaches in action.

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

## Suggested Links

* [API Reference of the Label directive](https://www.telerik.com/kendo-angular-ui-develop/components/labels/api/labeldirective)