• What is KendoReact
  • Getting Started
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Formupdated
    • Ganttupdated
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Map
    • Notification
    • OrgChartnew
    • PDF Processing
    • PDFViewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting

Floating Labels

Floating labels are part of the Material Design Guidelines and are fully supported by the KendoReact Inputs components.

Basic Usage

To enable the floating label functionality, wrap the any Input component in a Floating Label container and sync the editor's value with the editorValue property of the label.

The following example demonstrates how to implement floating labels in the TextBox, NumericTextBox, and TextArea components and style them with the KendoReact Material theme.

Please note that the floating label that wraps the TextArea component should have k-textarea-container class in order to be styled as expected.

Example
View Source
Change Theme:

In this article

Not finding the help you need?