New to Kendo UI for Angular? Start a free 30-day trial

LabelComponent

Component

Represents the Kendo UI Label component for Angular.

Use the LabelComponent to associate a label with input elements or components.

Definition

Package:@progress/kendo-angular-label

Selector:kendo-label

Export Name:Accessible in templates as #kendoLabelInstance="kendoLabel"

Syntax:

html

<kendo-label [for]="input" text="First name">
  <kendo-textbox #input></kendo-textbox>
</kendo-label>

Inputs

for

any

Associates the label with a component by a template reference or with an HTML element by id.

Example:

html

<input #myInput />
<kendo-label [for]="myInput" text="Username"></kendo-label>

labelCssClass

any

Sets the CSS classes for the label element. Accepts values supported by the ngClass directive.

Example:

html

<kendo-label text="Address" [labelCssClass]="'custom-label'"></kendo-label>

labelCssStyle

any

Sets the CSS styles for the label element. Accepts values supported by the ngStyle directive.

Example:

html

<kendo-label text="Name" [labelCssStyle]="{ color: 'red' }"></kendo-label>

optional

boolean

Marks a form field as optional. When enabled, the label displays the Optional text by default. You can customize the text by providing a custom message. (See example).

Default:

false

Example:

html

<kendo-label text="Phone" [optional]="true"></kendo-label>

text

string

Sets the text content of the Label. Use this property to describe the input.

Example:

html

<kendo-label text="Email"></kendo-label>