How to handle radio buttons in React
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Handling radio buttons in React requires controlled components where React manages the selected state through component state and event handlers. As the creator of CoreUI, a widely used open-source UI library, I’ve implemented radio button controls in thousands of React forms for enterprise applications. From my expertise, the most effective approach is using controlled components with shared name attributes and value checking. This method provides predictable form behavior with proper state management and validation.
Use controlled components with checked property and onChange handler for radio button groups.
import { useState } from 'react'
function RadioForm() {
let [selectedOption, setSelectedOption] = useState('')
return (
<form>
<label>
<input
type="radio"
name="options"
value="option1"
checked={selectedOption === 'option1'}
onChange={(e) => setSelectedOption(e.target.value)}
/>
Option 1
</label>
<label>
<input
type="radio"
name="options"
value="option2"
checked={selectedOption === 'option2'}
onChange={(e) => setSelectedOption(e.target.value)}
/>
Option 2
</label>
</form>
)
}
Radio buttons in the same group share the same name attribute. Use checked property to control which radio is selected by comparing the current state with the input’s value. The onChange handler updates state when users select different options.
Best Practice Note:
This is the same radio button approach we use in CoreUI React components for form controls. Always use controlled components and provide default values for better user experience and form validation.
