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, pass the label property to the Inputs component.

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

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { Input, NumericTextBox } from '@progress/kendo-react-inputs';

class App extends React.Component {
    render() {
        return (
            <div className="row">
                <div className="m-3">
                    <p>NumericTextBox</p>
                    <NumericTextBox label="Expected Salary" format="c" />
                </div>
                <div className="m-3">
                    <p>Input</p>
                    <Input label="First name" />
                </div>
            </div >
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

In this article