Components
    • Animation
    • Buttons
    • Charts
    • Common Utilities
    • Conversational UI
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gantt
    • Gauges
    • Grid
    • Indicators
    • Inputs
    • Labels
    • Layout
    • ListView
    • Notification
    • PDF Processing
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • Sortable
    • Tooltip
    • TreeList
    • TreeView
    • Upload
    Sample Applications
    Styling & Themes
    Common Features
    Project Setup
    Changelog

FloatingLabel Overview

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

Basic Usage

Wrap the component within a FloatingLabel component. Then set the label, editorValue and editorId properties of the FloatingLabel.

Example
View Source
Edit In Stackblitz  
Change Theme:

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.: KendoReact 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 (KendoReact components provide it as ariaLabelledBy property)
Example
View Source
Edit In Stackblitz  
Change Theme:

Editors with placeholder

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

Example
View Source
Edit In Stackblitz  
Change Theme:

Editors with invalid state

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

Example
View Source
Edit In Stackblitz  
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
Edit In Stackblitz  
Change Theme: