The FloatingLabel component enables you to provide a floating label functionality to Vue components. It supports labelling both form elements (e.g.:
input element) and custom focusable elements. It can contain Kendo UI for Vue Native Input components such as Native
DatePicker, or HTML elements like
FloatingLabel can be configured out of the box for the different inputs that are part of the Kendo UI for Vue Native suite. To add a FloatingLabel to an input, define the
label property of the different input components. The value passed to the
label property will appear as a floating label.
If you want to apply the
FloatingLabel over your custom input components here are the steps you should do:
- Wrap the component within a FloatingLabel component.
- Set the
editorIdproperties of the FloatingLabel.
For more details about how to use the "wrapping" approach check the below examples.
By default the wrapped element is associated with the
label element only if it's a form element (e.g.:
select element). Custom components that do not contain form element (e.g.: Kendo UI for Vue
DropDownList) would require setting additional properties to allow screen readers to correcly read the label. These properties are:
idproperty of the FloatingLabel
aria-labelledbyattribute of the nested editor (Kendo UI for Vue components provide it as
Editors that support placeholder should provide it to the FloatingLabel component.
The FloatingLabel component supports invalid styles by setting the
The Label component supports marking the label as optional by setting the