Floating Labels

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

Basic Usage

To enable the floating label functionality, pass a label property to the AutoComplete, ComboBox, DropDownList or MultiSelect component.

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

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

import { AutoComplete, ComboBox, DropDownList, MultiSelect } from '@progress/kendo-react-dropdowns';
import { dataProducts, dataCategories, dataOrders } from './data';

class App extends React.Component {
    render() {
        return (
            <div>
                <div className="row">
                    <div className="m-3">
                        <p>AutoComplete</p>
                        <AutoComplete label="Order" data={dataOrders} textField="orderName" valueField="orderId" suggest={true} />
                    </div>
                    <div className="m-3">
                        <p>ComboBox</p>
                        <ComboBox label="Category" data={dataCategories} textField="categoryName" valueField="categoryId" suggest={true} />
                    </div>
                    <div className="m-3">
                        <p>DropDownList</p>
                        <DropDownList label="Product" data={dataProducts} textField="productName" valueField="productId" />
                    </div>
                </div>
                <div>
                    <p>MultiSelect</p>
                    <MultiSelect label="Product(s)" data={dataProducts} textField="productName" style={{ width: '50%' }} />
                </div>
            </div>
        );
    }
}

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