Loading lesson path
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.
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}>Formula
< 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="cherry"
checked={selectedFruit === 'cherry'}
onChange={handleChange}/> Cherry </label> <br /> <button type="submit">Submit</button> </form>
);
}createRoot(document.getElementById('root')).render( <MyForm />
);Example »