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

Association

You can apply a floating label functionality to Kendo UI for Angular or other Angular components, or HTML input elements by wrapping them within a <kendo-floatinglabel> element.

Kendo UI for Angular Inputs

To associate the FloatingLabel with a Kendo UI for Angular input components like TextBox, NumericTextBox, MaskedTextBox and etc., wrap the component inside the FloatingLabel. If you use the MaskedTextBox, set its maskOnFocus option to true.

Example
View Source
Change Theme:

Kendo UI for Angular Date Inputs

To associate the FloatingLabel with a Kendo UI for Angular date input component, set the placeholder option of the DateInput, DatePicker, or DateTimePicker to an empty string, and wrap the component within a FloatingLabel.

Example
View Source
Change Theme:

Kendo UI for Angular Dropdowns

To associate the FloatingLabel with a Kendo UI for Angular DropDowns component, place the desired DropDown component within a FloatingLabel.

Example
View Source
Change Theme:

HTML Input Elements

To provide the floating label functionality to regular HTML input elements, apply the kendoTextBox directive to the input and wrap the component within a FloatingLabel.

<kendo-floatinglabel text="Enter First Name">
   <input [(ngModel)]="firstName" kendoTextBox name="firstName" />
</kendo-floatinglabel>

The following example demonstrates how to enable the floating label functionality to an <input /> element.

Example
View Source
Change Theme: