# Label Overview

The Kendo UI for Vue Label component enables you to provide a label functionality to Vue components. It supports labeling both form elements (for example: `input` element) and custom focusable elements. It can contain Kendo Vue Input components such as Kendo UI for Vue `DropDownList` and `NumericTextBox`, or HTML elements like `input`.

## Basic Usage

Add the Label component and the desired editor next to it. Then set the [`editorId`](https://www.telerik.com/kendo-vue-ui-develop/components/labels/api/labelprops#editorid) property of the Label and the `id` property of the editor.

The following example demonstrates how to add a basic label to an input field using the Label component.

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

## Labeling components without form element

By default the target editor is associated with the `label` element only if it's a form element (for example.: `input`, `select` element). Custom components that do not contain form element (for example.: Kendo UI for Vue `DropDownList`) require setting additional properties to allow screen readers to correctly read the label. These properties are:

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

Additionally you can transfer the `click` events from the Label to the editor by setting the [`editorId`](https://www.telerik.com/kendo-vue-ui-develop/components/labels/api/labelprops#editorid) property. On `click` events the Label component will look for `focus` method or `activeElement` property (to call its `click` method) on the editor ref. This functionality is already supported on all Kendo UI for Vue form components (for example: `DropDownList`).

The following example demonstrates how to label a custom DropDownList component without a form element by setting proper accessibility properties.

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

## Editors with invalid state

The Label 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 mark a label element as invalid using the `editorValid` property and the Error component to display an error message.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/labels/label/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 label element as optional using the `optional` property.

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

## Support and Learning Resources

* [Label Homepage](https://www.telerik.com/kendo-vue-ui/vue-label)
* [API Reference of the Labels Component](https://www.telerik.com/kendo-vue-ui-develop/components/labels/api/labelprops)
* [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)
* [Label Forum](https://www.telerik.com/forums/kendo-ui-vue?searchText=label)
* [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)