# 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 Input components such as `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 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 suite.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/labels/floatinglabel/basic/source.txt)

If you want to apply the `FloatingLabel` over your custom input components here are the steps you should do:

1. Wrap the component within a FloatingLabel component.
2. Set the [`label`](https://www.telerik.com/kendo-vue-ui-develop/components/labels/api/floatinglabelprops#label), [`editorValue`](https://www.telerik.com/kendo-vue-ui-develop/components/labels/api/floatinglabelprops#editorvalue) and [`editorId`](https://www.telerik.com/kendo-vue-ui-develop/components/labels/api/floatinglabelprops#editorid) properties 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:

* [`id`](https://www.telerik.com/kendo-vue-ui-develop/components/labels/api/floatinglabelprops#id) property of the FloatingLabel
* `aria-labelledby` attribute of the nested editor (Kendo UI for Vue components provide it as `ariaLabelledBy` property)

The following example demonstrates how to wrap a DropDownList component within a FloatingLabel and configure proper accessibility attributes.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/labels/floatinglabel/custom/source.txt)

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

[Demo Source](https://demos.telerik.com/kendo-vue-ui/labels/floatinglabel/placeholder/source.txt)

## Editors with invalid state

The FloatingLabel component supports invalid styles by setting the [`editorValid`](https://www.telerik.com/kendo-vue-ui-develop/components/labels/api/floatinglabelprops#editorvalid) to `false`.

The following example demonstrates how to implement validation styling for a floating label using the Error component.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/labels/floatinglabel/validation/source.txt)

## Marking the Label as optional

The Label component supports marking the label as optional by setting the [`optional`](https://www.telerik.com/kendo-vue-ui-develop/components/labels/api/floatinglabelprops#optional) to `true`.

The following example demonstrates how to mark a floating label as optional by setting the `optional` property to true.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/labels/floatinglabel/optional/source.txt)

## Support and Learning Resources

* [FloatingLabel Homepage](https://www.telerik.com/kendo-vue-ui/floatinglabel)
* [API Reference of the FloatingLabel Component](https://www.telerik.com/kendo-vue-ui-develop/components/labels/api/floatinglabelprops)
* [Getting Started with Kendo UI for Vue - JavaScript (Online Guide)](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/javascript-composition-api)
* [Getting Started with Kendo UI for Vue - TypeScript (Online Guide)](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/typescript-composition-api)
* [Getting Started with Kendo UI for Vue - JavaScript + Options API (Online Guide)](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/javascript-options-api)
* [Getting Started with Kendo UI for Vue - TypeScript + Options API (Online Guide)](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/typescript-options-api)
* [Getting Started with Kendo UI for Vue - Nuxt 3 (Online Guide)](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/get-started-nuxt-3)
* [Virtual Classroom (Training Course for Registered Users)](https://learn.telerik.com/learn/course/internal/view/elearning/45/kendo-ui-for-vue-with-typescript)
* [FloatingLabel Forum](https://www.telerik.com/forums/kendo-ui-vue?searchText=FloatingLabel)
* [Knowledge Base](https://www.telerik.com/kendo-vue-ui/components/knowledge-base/)
* [Kendo UI Productivity Tools extension for VS Code](https://www.telerik.com/kendo-vue-ui-develop/components/vscode-extension)

## Additional Resources

* [Vue Blogs](https://www.telerik.com/blogs/tag/kendo-ui-for-vue)
* [Kendo UI for Vue Roadmap](https://www.telerik.com/support/whats-new/kendo-vue-ui/roadmap)