Components / Labels / Label / 
New to Kendo UI for Vue? Start a free 30-day trial

Label Overview

The Kendo UI for Vue Native 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 property of the Label and the id property of the editor.

Example
View Source
Change Theme:

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

Example
View Source
Change Theme:

Editors with invalid state

The Label component supports invalid styles by setting the editorValid to false.

Example
View Source
Change Theme:

Marking the Label as optional

The Label component supports marking the label as optional by setting the optional to true.

Example
View Source
Change Theme:

Support and Learning Resources

Additional Resources

Previous
FloatingLabel
Next
Hint

In this article

Not finding the help you need?

Contact Support