# Floating Labels

Floating labels are part of the [Material Design Guidelines](https://material.io/guidelines/) and are fully supported by the KendoReact Inputs components.

## Basic Usage

To enable the floating label functionality, wrap the any Input component in a [`Floating Label`](https://www.telerik.com/kendo-react-ui/components/labels/api/floatinglabel) container and sync the editor's `value` with the [`editorValue`](https://www.telerik.com/kendo-react-ui/components/labels/api/floatinglabelprops#editorvalue) property of the label.

The following example demonstrates how to implement floating labels in the TextBox, NumericTextBox, and TextArea components and style them with the [KendoReact Material theme](https://www.telerik.com/design-system/docs/themes/kendo-themes/material/).

> Please note that the floating label that wraps the TextArea component should have `k-textarea-container` class in order to be styled as expected.

[Demo Source](https://demos.telerik.com/kendo-react-ui/inputs/label/func/source.txt)

## Suggested Links

* [API Reference of the NumericTextBox Component](https://www.telerik.com/kendo-react-ui/components/inputs/api/numerictextbox)
* [API Reference of the TextBox Component](https://www.telerik.com/kendo-react-ui/components/inputs/api/textboxprops)
* [API Reference of the TextArea Component](https://www.telerik.com/kendo-react-ui/components/inputs/api/textareaprops)
* [Material Design Guidelines](https://material.io/guidelines/)