Radio
Controlled
In a controlled Radio, the checked state is handled by a React
component. Set the checked state with the checked
prop and provide an
onChange
handler.
() => { class MyForm extends Component { constructor(props) { super(props); this.state = { value: 'quartz' }; this.handleChange = this.handleChange.bind(this); } handleChange(event) { this.setState({ value: event.target.value }); } render() { return ( <DemoForm> <Radio name="mineral" label="Quartz" value="quartz" checked={this.state.value === 'quartz'} onChange={this.handleChange} /> <Radio name="mineral" label="Magnetite" value="magnetite" checked={this.state.value === 'magnetite'} onChange={this.handleChange} /> </DemoForm> ); } } return <MyForm />; }