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 the Kendo Label, ensure that they 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.

To provide the label functionality for the custom Angular components, associate them 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.

@Component({
    selector: 'my-app',
    template: `
        <kendo-label
            text="Street Number"
            [optional]="true">
            <kendo-numerictextbox></kendo-numerictextbox>
        </kendo-label>
    `
})
class AppComponent { }

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:

@Component({
    selector: 'my-app',
    template: `
        <div class="row">
            <div class="col-xs-12 col-md-6 example-col">
                <label [for]="age">Age: </label>
                <kendo-datepicker #age></kendo-datepicker>
            </div>
            <div class="col-xs-12 col-md-6 example-col">
                <label [for]="'age'">Age: </label>
                <input id="age" />
            </div>
        </div>
    `
})
class AppComponent { }