---
title: Overview
position: 1
seo_title: Overview of the Floating Label Component
seo_description: Learn about the basic features of the Telerik and Kendo UI
  Floating Label component.
---
## Floating Label Overview

The Floating Label component is a user interface (UI) element that floats above the associated field when that field is focused or has user input. It provides an interactive and space-efficient way to display labels in forms as the labels move out of the way when the user engages with the field. This allows for a cleaner and more streamlined form layout, enhancing the overall user experience and reducing visual clutter.

By default, the Floating Label can be set as part of the Telerik and Kendo UI Form component. Custom components that do not contain form element would require setting additional properties.

### Live Demo

<LiveDemo data='{"links":[{"text":"Angular","url":"https://www.telerik.com/kendo-angular-ui/components/labels/floatinglabel"},{"text":"Blazor","url":"https://demos.telerik.com/blazor-ui/floatinglabel/overview"},{"text":"jQuery","url":"https://demos.telerik.com/kendo-ui/textbox/floating-label"},{"text":"React","url":"https://www.telerik.com/kendo-react-ui/components/labels/floating-label"},{"text":"Vue","url":"https://www.telerik.com/kendo-vue-ui/components/inputs/floating-labels"},{"text":"ASP.NET Core","url":"https://demos.telerik.com/aspnet-core/textbox/floating-label"},{"text":"ASP.NET MVC","url":"https://demos.telerik.com/aspnet-mvc/textbox/floating-label"}],"demo":"components/floating-label/overview"}'></LiveDemo>

### Anatomy

The anatomy of the Floating Label summarizes the elements of the component. 

The next image shows the anatomy of a Floating Label and includes the following elements:

<BlueprintImage data='{"description":"","labels":[{"text":"Floating Label"},{"text":"Associated component"}]}'>![A Telerik and Kendo UI Floating Label component.](images/components-floating-label-overview-anatomy.png "Anatomy and elements of a Telerik and Kendo UI Floating Label component.")</BlueprintImage>

Depending on the elements they display, the Telerik and Kendo UI Floating Labels can be marked as optional by setting the `optional` configuration to `true`:

<BlueprintImage data='{"description":"","labels":[]}'>![A Telerik and Kendo UI Floating Label component set as optional](images/components-floating-label-overview-optional.png "A representation of an optional Telerik and Kendo UI Floating Label component")</BlueprintImage>

Optional floating labels are used to indicate that the associated form field is optional and not required for submission. They are denoted by italic text and brackets—*(Optional)*. Optional floating labels help users understand which fields are mandatory and which ones they can skip if desired.

### Framework-Specific Documentation

For specific information about the component, refer to its official product documentation:

<Wrap>
<ExternalResource data='{"title":"Kendo UI for Angular FloatingLabel","description":"Find more information about the Kendo UI for Angular FloatingLabel in the official product documentation of the component.","url":"http://www.telerik.com/kendo-angular-ui/components/labels/floatinglabel/"}'>![Kendo UI for Angular logo.](/images/angular-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for Blazor FloatingLabel","description":"Find more information about the Telerik UI for Blazor FloatingLabel in the official product documentation of the component.","url":"https://docs.telerik.com/blazor-ui/components/floatinglabel/overview"}'>![Telerik UI for Blazor logo.](/images/blazor-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for jQuery FloatingLabel","description":"Find more information about the Kendo UI for jQuery FloatingLabel in the official product documentation of the component.","url":"https://docs.telerik.com/kendo-ui/controls/textbox/labels"}'>![Kendo UI for jQuery logo.](/images/jquery-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"KendoReact FloatingLabel","description":"Find more information about the KendoReact FloatingLabel in the official product documentation of the component.","url":"http://www.telerik.com/kendo-react-ui/components/labels/floatinglabel/"}'>![Kendo UI for React logo.](/images/react-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for Vue FloatingLabel","description":"Find more information about the Kendo UI for Vue FloatingLabel in the official product documentation of the component.","url":"http://www.telerik.com/kendo-vue-ui/components/labels/floatinglabel/"}'>![Kendo UI for Vue logo.](/images/vue-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET Core FloatingLabel","description":"Find more information about the Telerik UI for ASP.NET Core FloatingLabel component.","url":"https://docs.telerik.com/aspnet-core/html-helpers/editors/textbox/labels"}'>![Telerik UI for ASP.NET Core logo.](/images/core-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET MVC FloatingLabel","description":"Find more information about the Telerik UI for ASP.NET MVC FloatingLabel component.","url":"https://docs.telerik.com/aspnet-mvc/html-helpers/editors/textbox/labels"}'>![Telerik UI for ASP.NET MVC logo.](/images/mvc-logo.svg)</ExternalResource>

</Wrap>