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