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 } from '@progress/kendo-react-form';
import { Input, RadioGroup } from '@progress/kendo-react-inputs';

const gender = [
    { label: 'Male', value: 'male' },
    { label: 'Female', value: 'female' },
    { label: 'Other', value: 'other' }
];

const radioGroupValidator = (value) => (value ? "" : "Please select on of the options!");

const MyRadioGroup = (fieldRenderProps) => {
    const { validationMessage, visited, data, ...others } = fieldRenderProps;

    return (
        <div>
            <RadioGroup ariaLabelledBy="radiogroup_label" ariaDescribedBy="required_label" data={data} {...others} />
            {
                visited && validationMessage && (<div className={'k-required'} id="required_label">{validationMessage}</div>)
            }
        </div>
    );
};

const App = () => {
    const handleSubmit = (dataItem) => alert(JSON.stringify(dataItem, null, 2));
    return (
        <Form
            onSubmit={handleSubmit}
            render={(formRenderProps) => {
                return (
                    <form onSubmit={formRenderProps.onSubmit} className={'k-form'}>
                        <fieldset>
                            <legend>Please fill in the fields:</legend>
                            <div className="mb-3">
                                <Field name={'firstName'} component={Input} label={'First name'} />
                            </div>

                            <div className="mb-3">
                                <Field name={'lastName'} component={Input} label={'Last name'} />
                            </div>
                            <div className="mb-3">
                                <span id="radiogroup_label">Select your gender:</span>
                                <Field
                                    name={'gender'}
                                    data={gender}
                                    component={MyRadioGroup}
                                    validator={radioGroupValidator}
                                />
                            </div>
                        </fieldset>
                        <button
                            type={'submit'}
                            className="k-button"
                            disabled={!formRenderProps.allowSubmit}
                        >
                            Submit
                    </button>
                    </form>
                );
            }
            }
        />
    );
};
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);