Labels / Error
material theme

Error Overview

The Error component enables you to display an error message to React components.

Basic Usage

Add the Error component after the desired editor. Then set the id property of the Error and the aria-describedby property of the editor.

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

const App = () => {
    const [value, setValue] = React.useState();
    const editorId = 'firstName';
    return (
        <FormElement style={{maxWidth: 400}}>
            <Label editorId={editorId}>
                First Name:&nbsp;
            </Label>
            <Input
                id={editorId}
                value={value}
                ariaDescribedBy={'firstNameError'}
                onChange={(e) => setValue(e.value)}
            />
            {
                !value && <Error id={'firstNameError'}>This field is required.</Error>
            }
        </FormElement>
    );
};

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

Text Direction

The Error component allows changing its text direction. To change the direction set the direction property to end.

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

const App = () => {
    const [value, setValue] = React.useState();
    const editorId = 'firstName';
    return (
        <FormElement style={{maxWidth: 400}}>
            <Label editorId={editorId}>
                First Name:&nbsp;
            </Label>
            <Input
                id={editorId}
                value={value}
                ariaDescribedBy={'firstNameError'}
                onChange={(e) => setValue(e.value)}
            />
            {
                !value && <Error id={'firstNameError'} direction={'end'}>This field is required.</Error>
            }
        </FormElement>
    );
};

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

Is this article helpful?

Not finding the help you need?

Contact Support