FloatingLabel Overview
The FloatingLabel enables you to provide a floating label functionality to input
elements.
Basic Usage
The FloatingLabel provides the floating label functionality in an input
element.
Implementing Floating Labels
The FloatingLabel component supports both Template and Reactive Forms and can contain Kendo UI for Angular Input components such as kendo-combobox
and kendo-numerictextbox
,
or HTML Input elements with the kendoTextBox
directive applied.
Using with Kendo UI for Angular Inputs
Wrap the component with within a FloatingLabel component. When using the MaskedTextBox
component, set its maskOnFocus
option to true
.
Using with HTML Input elements
To provide the floating label functionality to regular HTML Input elements, wrap an Input element with the kendoTextBox
directive applied within a FloatingLabel component.
Using with Kendo UI for Angular Date Inputs
Set the Kendo UI for Angular DateInput, DatePicker, or DateTimePicker placeholder
option to an empty string, and wrap the component within a FloatingLabel.
Using with Kendo UI for Angular Dropdowns
Place an element from the Kendo UI for Angular DropDowns package within a FloatingLabel.
Focusing the component
The floating animation will not work if the initial value of the underlying component is set programmatically and it uses [(value)] binding.
As a workaround you could:
- Use Angular forms by utilizing ngModel or formControl binding
- Focus the component manually after the value is updated
The FloatingLabel relies on handling value and focus change events, and neither is triggered when the value is changed programmatically.
Optional Text
The FloatingLabel component allows toggling a text indicating that a form field is optional via the optional
input property. When it is set to true
a default Optional text will be rendered next to the Label text.
The text is customizable via custom messages or the Angular i18n framework.
Refer to the article on Globalization for further details and runnable demos.