React Forms - Radio
Radio
Radio buttons are typically used in groups where only one option can be selected.
All radio buttons in a group should share the same name attribute.
You control radio buttons based on whether the radio button's value matches the selected value in your state.
Example:
React uses the checked attribute to control the radio button:
import { useState } from 'react';
import { createRoot } from 'react-dom/client';
function MyForm() {
const [selectedFruit, setSelectedFruit] = useState('banana');
const handleChange = (event) => {
setSelectedFruit(event.target.value);
};
const handleSubmit = (event) => {
alert(`Your favorite fruit is: ${selectedFruit}`);
event.preventDefault();
};
return (
<form onSubmit={handleSubmit}>
<p>Select your favorite fruit:</p>
<label>
<input
type="radio"
name="fruit"
value="apple"
checked={selectedFruit === 'apple'}
onChange={handleChange}
/> Apple
</label>
<br />
<label>
<input
type="radio"
name="fruit"
value="banana"
checked={selectedFruit === 'banana'}
onChange={handleChange}
/> Banana
</label>
<br />
<label>
<input
type="radio"
name="fruit"
value="orange"
checked={selectedFruit === 'cherry'}
onChange={handleChange}
/> Cherry
</label>
<br />
<button type="submit">Submit</button>
</form>
);
}
createRoot(document.getElementById('root')).render(
<MyForm />
);
