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.

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.

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.

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.

Copy Code<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.

Suggested Links

• API Reference of the FloatingLabel