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.
The following example shows how to set up the FloatingLabel component:
- Wrap the component within a FloatingLabel component.
- Set the
label,editorValueandeditorIdproperties of the FloatingLabel.
Example
View Source
Change Theme:
The FloatingLabel is part of the KendoReact Labels component library. The procedures for installing, importing, and using the Labels are identical for all components in the package. To learn how to use the FloatingLabel and the rest of the Labels, see the Getting Started with the KendoReact Labels guide.
Key Features
- Editors with Invalid State—You can set the FloatingLabel in invalid state.
- Optional—You can make the FloatingLabel as option.
- Placeholder—You can use FloatingLabel together with a placeholder.
- Without Form Element—You can associate the FloatingLabel with DOM elements that are
notform elements.
