Labels

Editor labelling is important topic in the form's context. When correctly done, it associates the editor with its label not only visually, but to the assistive technologies as well. Also, click events on the label are forwarded to the target editor for user convenience. The following example shows how to use the tools provided by the Labels package to label editors.

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

const emailRegex = new RegExp(/\S+@\S+\.\S+/);
const emailValidator = (value) => (emailRegex.test(value) ? "" : "Please enter a valid email.");
const LabelEmailInput = (fieldRenderProps) => {
    const { validationMessage, visited, label, id, valid, disabled, ...others } = fieldRenderProps;
    const showValidationMessage = visited && validationMessage;
    return (
        <FieldWrapper>
            <Label editorId={id} editorValid={valid} editorDisabled={disabled}>{label}</Label>
            <Input valid={valid} type={'email'} id={id} disabled={disabled} {...others} />
            {
                !showValidationMessage &&
                    <Hint>Enter your personal email address.</Hint>
            }
            {
                showValidationMessage &&
                    <Error>{validationMessage}</Error>
            }
        </FieldWrapper>
    );
};
const FloatingLabelEmailInput = (fieldRenderProps) => {
    const { validationMessage, visited, label, id, valid, value, disabled, ...others } = fieldRenderProps;
    const showValidationMessage = visited && validationMessage;
    return (
        <FieldWrapper>
            <FloatingLabel label={label} editorValue={value} editorValid={valid} editorDisabled={disabled} editorId={id}>
                <Input value={value} valid={valid} type={'email'} id={id} disabled={disabled} {...others} />
            </FloatingLabel>
            {
                !showValidationMessage &&
                    <Hint>Enter your personal email address.</Hint>
            }
            {
                showValidationMessage &&
                    <Error>{validationMessage}</Error>
            }
        </FieldWrapper>
    );
};
const App = () => {
    const handleSubmit = (dataItem) => alert(JSON.stringify(dataItem, null, 2));
    return (
        <Form
            onSubmit={handleSubmit}
            render={(formRenderProps) => (
                <FormElement style={{maxWidth: 650}}>
                     <Field
                        id={'email'}
                        name={'email'}
                        label={'Email (Regular Label)'}
                        component={LabelEmailInput}
                        validator={emailValidator}
                    />
                    <Field
                        id={'secondEmail'}
                        name={'secondemail'}
                        label={'Email (Floating Label)'}
                        component={FloatingLabelEmailInput}
                        validator={emailValidator}
                    />
                    <div className="k-form-buttons">
                        <button
                            type={'submit'}
                            className="k-button"
                            disabled={!formRenderProps.allowSubmit}
                        >
                            Submit
                        </button>
                    </div>
                </FormElement>
            )}
        />
    );
};
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);