Controlled Mode

The RadioGroup provides options for controlling the checked state. It supports setting it's boolean value using value prop to the underlying input element.

Controlling the Checked and Disabled states

To manage the checked state of the Radio buttons in a RadioGroup:

  1. Use its value property.
  2. Handle the onChange event.
  3. Pass the new value through the props.
import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { RadioGroup } from '@progress/kendo-react-inputs';

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

const App = () => {
    const [checked, setChecked] = React.useState(data[0].value);
    const [disabled, setDisabled] = React.useState(false);

    const handleClick = () => {
        setDisabled(!disabled);
    }

    const handleChange = (e) => {
        setChecked(e.value);
    }

    return (
        <div className="row">
            <div className="col-md-5">
                <RadioGroup data={data} disabled={disabled} value={checked} onChange={handleChange}/>
            </div>
            <div className="col-md-4">
                <span>Current checked value is <strong>{checked}</strong></span>
                <button className="k-button" onClick={handleClick}>Toggle disabled state</button>
            </div>
        </div>
    )
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);