• Introduction
  • Getting Started
  • Vue 2 End of Support
  • Native Components
    • Animation
    • Buttons
    • Chartsupdated
    • Conversational UInew
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gauges
    • Grid
    • Icons
    • Indicators
    • Inputs
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Notification
    • PDF Processing
    • Popup
    • Progress Bars
    • Scheduler
    • ScrollView
    • Tooltip
    • TreeList
    • TreeView
    • Upload
  • Wrapper Components
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • FAQ
  • Troubleshooting
Components / Labels / FloatingLabel / 
New to Kendo UI for Vue? Start a free 30-day trial

FloatingLabel Overview

The FloatingLabel component enables you to provide a floating label functionality to Vue components. It supports labelling both form elements (e.g.: input element) and custom focusable elements. It can contain Kendo UI for Vue Native Input components such as Native DropDownList, NumericTextBox and DatePicker, or HTML elements like input.

Basic Usage

The FloatingLabel can be configured out of the box for the different inputs that are part of the Kendo UI for Vue Native suite. To add a FloatingLabel to an input, define the label property of the different input components. The value passed to the label property will appear as a floating label.

Example
View Source
Change Theme:

If you want to apply the FloatingLabel over your custom input components here are the steps you should do:

  1. Wrap the component within a FloatingLabel component.
  2. Set the label, editorValue and editorId properties of the FloatingLabel.

For more details about how to use the "wrapping" approach check the below examples.

Labelling components without form element

By default the wrapped element 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 FloatingLabel
  • aria-labelledby attribute of the nested editor (Kendo UI for Vue components provide it as ariaLabelledBy property)
Example
View Source
Change Theme:

Editors with placeholder

Editors that support placeholder should provide it to the FloatingLabel component.

Example
View Source
Change Theme:

Editors with invalid state

The FloatingLabel 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
Overview
Next
Label

In this article

Not finding the help you need?

Contact Support