Hint Overview

The Hint component enables you to display a hint message to React components.

Basic Usage

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

import React from 'react';
import ReactDOM from 'react-dom';
import { Label, Hint } 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={'firstNameHint'}
                onChange={(e) => setValue(e.value)}
            />
            <Hint id={'firstNameHint'}>e.g.: Peter</Hint>
        </FormElement>
    );
};

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

Text Direction

The Hint component allows changing the text direction between the start and the end of the element. To change the direction set the direction property to end.

import React from 'react';
import ReactDOM from 'react-dom';
import { Label, Hint } 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={'firstNameHint'}
                onChange={(e) => setValue(e.value)}
            />
            <Hint id={'firstNameHint'} direction={'end'}>e.g.: Peter</Hint>
        </FormElement>
    );
};

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