The Label Component is part of Kendo UI for Angular, a professional grade UI library with 100+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Basic Usage

The Label component enables you to associate labels with focusable Angular components or HTML elements.

Example
View Source
Edit In Stackblitz  
Change Theme:

Association

Wrap the HTML element or Angular component within a <kendo-label> element, or associate them by using the for input property.

Kendo UI for Angular Components

To provide the label functionality for Kendo UI for Angular components you could:

  • wrap the component within a <kendo-label> element or
  • associate them through the for property by providing a template reference variable that points to the component.

The following example demonstrates various components, associated with a Label.

Example
View Source
Edit In Stackblitz  
Change Theme:

Other Angular Components

To associate your own Angular components with Kendo Label, take the following steps:

  • Ensure that the components have a method named focus. This method will be invoked on label click, and should hold the custom logic to programmatically focus the necessary internal HTML element.

  • Associate the components through the for property by providing a template reference variable that points to the component.

The custom component can be placed either within or outside of the <kendo-label></kendo-label> tag, as long as it has the proper template reference variable binding.

The following example demonstrates a custom Input component, associated with a Label.

Example
View Source
Edit In Stackblitz  
Change Theme:

HTML Inputs

To provide the label functionality for regular HTML Elements you could:

  • Wrap the HTML element within a <kendo-label> element or
  • Associate them through the for property by providing the id value of the HTML element or a template reference variable that points to it.

This following example demonstrates the approaches in action.

Example
View Source
Edit In Stackblitz  
Change Theme:

Optional Text

The Label component allows indicating a form field as optional by using the optional input property. When it is set to true the text Optional will be rendered as part of the Label text.

Example
View Source
Edit In Stackblitz  
Change Theme:

The optional text could be changed or localized via custom messages or the Angular i18n framework.The Label component also provides built-in RTL support.

Refer to the following Globalization article for further details and runnable demos.

Label Directive

By using the [for] property binding, the Label directive associates a label HTML element with focusable Angular components or HTML elements.

  • To associate a focusable Angular component set the for property binding by providing a template reference variable that points to the component.

  • To associate a focusable HTML element, set the for property binding by providing the id value of the HTML element.

Both approaches are demonstrated in the following example:

Example
View Source
Edit In Stackblitz  
Change Theme: