FloatingLabel Overview
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 DropDownList, NumericTextBox and DatePicker, or HTML elements like input.
Basic Usage
The 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.
The following example demonstrates how to use the FloatingLabel component with various input types from the Kendo UI for Vue Native suite.
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
label,editorValueandeditorIdproperties of the FloatingLabel.
For more details about how to use the "wrapping" approach check the below examples.
Labelling components without form element
By default the wrapped element is associated with the label element only if it's a form element (e.g.: input, 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 FloatingLabelaria-labelledbyattribute of the nested editor (Kendo UI for Vue components provide it asariaLabelledByproperty)
The following example demonstrates how to wrap a DropDownList component within a FloatingLabel and configure proper accessibility attributes.
Editors with placeholder
Editors that support placeholder should provide it to the FloatingLabel component.
The following example demonstrates how to use the FloatingLabel component with an input element that has a placeholder value.
Editors with invalid state
The FloatingLabel component supports invalid styles by setting the editorValid to false.
The following example demonstrates how to implement validation styling for a floating label using the Error component.
Marking the Label as optional
The Label component supports marking the label as optional by setting the optional to true.
The following example demonstrates how to mark a floating label as optional by setting the optional property to true.
Support and Learning Resources
- FloatingLabel Homepage
- API Reference of the FloatingLabel Component
- Getting Started with Kendo UI for Vue - JavaScript (Online Guide)
- Getting Started with Kendo UI for Vue - TypeScript (Online Guide)
- Getting Started with Kendo UI for Vue - JavaScript + Options API (Online Guide)
- Getting Started with Kendo UI for Vue - TypeScript + Options API (Online Guide)
- Getting Started with Kendo UI for Vue - Nuxt 3 (Online Guide)
- Virtual Classroom (Training Course for Registered Users)
- FloatingLabel Forum
- Knowledge Base
- Kendo UI Productivity Tools extension for VS Code