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.

import React from 'react';
import ReactDOM from 'react-dom';
import { FloatingLabel } from '@progress/kendo-react-labels';
import { Input } from '@progress/kendo-react-inputs';

const App = () => {
    const [value, setValue] = React.useState();
    const editorId = 'firstName';
    return (
        <FloatingLabel label={'First Name:'} editorId={editorId} editorValue={value}>
            <Input
                id={editorId}
                value={value}
                onChange={(e) => setValue(e.value)}
            />
        </FloatingLabel>
    );
};

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

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)
import React from 'react';
import ReactDOM from 'react-dom';
import { FloatingLabel } from '@progress/kendo-react-labels';
import { DropDownList } from '@progress/kendo-react-dropdowns';

const sizes = ["X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large"];
const App = () => {
    const [ddlState, setDdlState] = React.useState();
    const editorId = 'sizes-editor';
    const labelId = 'sizes-label'
    return (
        <FloatingLabel
            id={labelId}
            label={'Shirt Size:'}
            editorId={editorId}
            editorValue={ddlState}
        >
            <DropDownList
                id={editorId}
                ariaLabelledBy={labelId}
                value={ddlState}
                data={sizes}
                onChange={(e) => setDdlState(e.target.value)}
            />
        </FloatingLabel>
    );
};

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

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

Editors with placeholder

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

import React from 'react';
import ReactDOM from 'react-dom';
import { FloatingLabel } from '@progress/kendo-react-labels';
import { Input } from '@progress/kendo-react-inputs';

const App = () => {
    const [value, setValue] = React.useState();
    const editorId = 'homeaddress';
    const placeholder = 'e.g.: Dublin blvd';
    return (
        <FloatingLabel
            label={'Home Address:'}
            editorId={editorId}
            editorValue={value}
            editorPlaceholder={placeholder}
        >
            <Input
                id={editorId}
                value={value}
                placeholder={placeholder}
                onChange={(e) => setValue(e.value)}
            />
        </FloatingLabel>
    );
};

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

Editors with invalid state

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

import React from 'react';
import ReactDOM from 'react-dom';
import { FloatingLabel, Error } from '@progress/kendo-react-labels';
import { FormElement, FieldWrapper } from '@progress/kendo-react-form';
import { Input } from '@progress/kendo-react-inputs';

const App = () => {
    const [value, setValue] = React.useState();
    const editorId = 'firstname';
    const isValid = !!value;
    return (
            <FormElement style={{maxWidth: 400}}>
                <FieldWrapper>
                <FloatingLabel
                    label={'First name:'}
                    editorId={editorId}
                    editorValue={value}
                    editorValid={isValid}
                >
                    <Input
                        id={editorId}
                        value={value}
                        valid={isValid}
                        onChange={(e) => setValue(e.value)}
                    />
                </FloatingLabel>
                {
                    !isValid && <Error>This field is required.</Error>
                }
            </FieldWrapper>
        </FormElement>
    );
};

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

Marking the Label as optional

The Label component supports marking the label as optional by setting the optional to true.

import React from 'react';
import ReactDOM from 'react-dom';
import { FloatingLabel } from '@progress/kendo-react-labels';
import { Input } from '@progress/kendo-react-inputs';

const App = () => {
    const [value, setValue] = React.useState();
    const editorId = 'firstName';
    return (
        <FloatingLabel optional={true} label={'First Name'} editorId={editorId} editorValue={value}>
            <Input
                id={editorId}
                value={value}
                onChange={(e) => setValue(e.value)}
            />
        </FloatingLabel>
    );
};

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