Labels / Label
material theme

Label Overview

The Label component enables you to provide a 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

Add the Label component and the desired editor next to it. Then set the editorId property of the Label and the id property of the editor.

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

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

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

Labelling components without form element

By default the target editor 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 Label
  • aria-labelledby attribute of the editor (KendoReact components provide it as ariaLabelledBy property)

Additionally you can forward the click events from the Label to the editor by setting the editorRef property. On click events the Label component will look for focus method or activeElement property (to call its click method) on the editor ref. This functionality is already supported on all KendoReact form components (e.g.: DropDownList).

import React from 'react';
import ReactDOM from 'react-dom';
import { Label } from '@progress/kendo-react-labels';
import { DropDownList } from '@progress/kendo-react-dropdowns';
import { FormElement, FieldWrapper } from '@progress/kendo-react-form';

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

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

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

Editors with invalid state

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

import React from 'react';
import ReactDOM from 'react-dom';
import { Label, 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>
                <Label
                    editorId={editorId}
                    editorValid={isValid}
                >
                First name:&nbsp;
                </Label>
                <Input
                    id={editorId}
                    value={value}
                    valid={isValid}
                    onChange={(e) => setValue(e.value)}
                />
                {
                    !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 { Label } from '@progress/kendo-react-labels';
import { Input } from '@progress/kendo-react-inputs';
import { FormElement, FieldWrapper } from '@progress/kendo-react-form';

const App = () => {
    const [value, setValue] = React.useState();
    const editorId = 'firstName';
    return (
        <FormElement style={{maxWidth: 400}}>
            <FieldWrapper>
                <Label optional={true} editorId={editorId}>
                    First Name
                </Label>
                <Input
                    id={editorId}
                    value={value}
                    onChange={(e) => setValue(e.value)}
                />
            </FieldWrapper>
        </FormElement>
    );
};

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