Label Overview
The Label component enables you to provide a label functionality to Vue components. It supports labelling both form elements (e.g.: 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.
Labelling components without form element
By default the target editor 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
property of the Labelaria-labelledby
attribute of the editor (Kendo UI for Vue components provide it asariaLabelledBy
property)
Additionally you can forward 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 (e.g.: DropDownList
).
Editors with invalid state
The Label component supports invalid styles by setting the editorValid
to false
.
Marking the Label as optional
The Label component supports marking the label as optional by setting the optional
to true
.
Support and Learning Resources
- Label Homepage
- API Reference of the Labels Component
- Getting Started with Kendo UI for Vue - JavaScript (Online Guide)
- Getting Started with Kendo UI for Vue - TypeScript (Online Guide)
- Getting Started with Kendo UI for Vue - JavaScript + Options API (Online Guide)
- Getting Started with Kendo UI for Vue - TypeScript + Options API (Online Guide)
- Getting Started with Kendo UI for Vue - Nuxt 3 (Online Guide)
- Virtual Classroom (Training Course for Registered Users)
- Label Forum
- Knowledge Base
- Kendo UI Productivity Tools extension for VS Code