Forms Support

The RadioGroup component can be easily integrated with our KendoReact Form as well as the HTML5 form (or other third-party solutions).

The form enables you to validate the radio group and prevent the submission of forms which are in an invalid state.

Support for KendoReact Form

The KendoReact Form component integrates with all KendoReact components.

You can display error messages and fully customize the behavior of the rendered component by using the additional properties of the Field component.

The following example demonstrates how to render a required RadioGroup within a KendoReact Form component.

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

const confirmationData = [
    { label: 'Phone Call', value: 'phone' },
    { label: 'Via Email', value: 'email' }
];

const firstNameValidator = (value) => !value ?
    "First Name is required" :
    value.length < 7 ? "First Name should be at least 7 characters long." : "";

const lastNameValidator = (value) => !value ?
    "Last Name is required" :
    value.length < 7 ? "Last Name should be at least 7 characters long." : "";

const radioGroupValidator = (value) => !value ?
    "Type of Confirmation is required" : "";

const FormInput = (fieldRenderProps) => {
    const { validationMessage, touched, label, id, valid, disabled, hint, type, optional, ...others } = fieldRenderProps;

    const showValidationMessage = touched && validationMessage;
    const showHint = !showValidationMessage && hint;
    const hindId = showHint ? `${id}_hint` : '';
    const errorId = showValidationMessage ? `${id}_error` : '';

    return (
        <FieldWrapper>
            <Label editorId={id} editorValid={valid} editorDisabled={disabled} optional={optional}>{label}</Label>
            <div className={'k-form-field-wrap'}>
                <Input
                    valid={valid}
                    type={type}
                    id={id}
                    disabled={disabled}
                    ariaDescribedBy={`${hindId} ${errorId}`}
                    {...others}
                />
                {
                    showHint &&
                    <Hint id={hindId}>{hint}</Hint>
                }
                {
                    showValidationMessage &&
                    <Error id={errorId}>{validationMessage}</Error>
                }
            </div>
        </FieldWrapper>
    );
};

const FormRadioGroup = (fieldRenderProps) => {
    const { validationMessage, touched, id, label, layout, valid, disabled, hint, ...others } = fieldRenderProps;

    const showValidationMessage = touched && validationMessage;
    const showHint = !showValidationMessage && hint
    const hindId = showHint ? `${id}_hint` : '';
    const errorId = showValidationMessage ? `${id}_error` : '';
    const labelId = label ? `${id}_label` : '';

    return (
        <FieldWrapper>
            <Label id={labelId} editorId={id} editorValid={valid} editorDisabled={disabled}>{label}</Label>
            <RadioGroup
                id={id}
                ariaDescribedBy={`${hindId} ${errorId}`}
                ariaLabelledBy={labelId}
                valid={valid}
                disabled={disabled}
                layout={layout}
                {...others}
            />
            {
                showHint &&
                <Hint id={hindId}>{hint}</Hint>
            }
            {
                showValidationMessage &&
                <Error id={errorId}>{validationMessage}</Error>
            }
        </FieldWrapper>
    );
};

const App = () => {
    const handleSubmit = (dataItem) => alert(JSON.stringify(dataItem, null, 2));
    return (
        <Form
            onSubmit={handleSubmit}
            render={(formRenderProps) => (
                <FormElement style={{ width: 400 }}>
                    <fieldset className={'k-form-fieldset'}>
                        <legend className={'k-form-legend'}>User Details</legend>
                        <Field
                            id={'firstName'}
                            name={'firstName'}
                            label={'First Name'}
                            component={FormInput}
                            validator={firstNameValidator}
                        />
                        <Field
                            id={'lastName'}
                            name={'lastName'}
                            label={'Last Name'}
                            component={FormInput}
                            validator={lastNameValidator}
                        />
                        <Field
                            id={'confirmationType'}
                            name={'confirmationType'}
                            label={'Type of Confirmation'}
                            hint={'Hint: Choose a way to receive a confirmation'}
                            component={FormRadioGroup}
                            data={confirmationData}
                            layout={'horizontal'}
                            validator={radioGroupValidator}
                        />
                        <div className="k-form-buttons">
                            <Button
                                primary={true}
                                type={'submit'}
                                disabled={!formRenderProps.allowSubmit}
                            >
                                Submit
                        </Button>
                            <Button onClick={formRenderProps.onFormReset}>
                                Clear
                        </Button>
                        </div>
                    </fieldset>
                </FormElement>
            )}
        />
    );
}

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