React Forms Radio Buttons

React Forms – Radio Buttons

Radio buttons allow users to pick one option from multiple choices.
Unlike checkboxes, only one selection is allowed at a time.

In React, radio buttons are controlled using state + onChange, just like other form elements.

✅ Basic Radio Button Example

import { useState } from "react";

function GenderForm() {
const [gender, setGender] = useState("");

return (
<>
<h3>Select Gender:</h3>

<label>
<input
type="radio"
name="gender"
value="Male"
checked={gender === "Male"}
onChange={(e) => setGender(e.target.value)}
/>
Male
</label>

<label>
<input
type="radio"
name="gender"
value="Female"
checked={gender === "Female"}
onChange={(e) => setGender(e.target.value)}
/>
Female
</label>

<p>Selected: {gender}</p>
</>
);
}

import { useState } from "react";

function GenderForm() {

const [gender, setGender] = useState("");

return (

<h3>Select Gender:</h3>

<label>

<input

type="radio"

name="gender"

value="Male"

checked={gender === "Male"}

onChange={(e) => setGender(e.target.value)}

Male

</label>

<label>

<input

type="radio"

name="gender"

value="Female"

checked={gender === "Female"}

onChange={(e) => setGender(e.target.value)}

Female

</label>

<p>Selected: {gender}</p>

</>

);

}

export default GenderForm;

🧠 Key Notes

Attribute	Purpose
`name=""`	Groups radio buttons together
`value=""`	Identifies each option
`checked={state === value}`	Marks selected radio button
`onChange`	Updates state

✅ Radio with Form Submit

import { useState } from "react";

function SurveyForm() {
const [feeling, setFeeling] = useState("");

const handleSubmit = (e) => {
e.preventDefault();
alert("You selected: " + feeling);
};

return (
<form onSubmit={handleSubmit}>
<h3>How are you feeling today?</h3>

<label>
<input
type="radio"
name="feeling"
value="Happy"
checked={feeling === "Happy"}
onChange={(e) => setFeeling(e.target.value)}
/>
Happy
</label>

<label>
<input
type="radio"
name="feeling"
value="Sad"
checked={feeling === "Sad"}
onChange={(e) => setFeeling(e.target.value)}
/>
Sad
</label>

<label>
<input
type="radio"
name="feeling"
value="Excited"
checked={feeling === "Excited"}
onChange={(e) => setFeeling(e.target.value)}
/>
Excited
</label>

<br /><br />
<button type="submit">Submit</button>
</form>
);
}

import { useState } from "react";

function SurveyForm() {

const [feeling, setFeeling] = useState("");

const handleSubmit = (e) => {

e.preventDefault();

alert("You selected: " + feeling);

};

return (

<h3>How are you feeling today?</h3>

<label>

<input

type="radio"

name="feeling"

value="Happy"

checked={feeling === "Happy"}

onChange={(e) => setFeeling(e.target.value)}

Happy

</label>

<label>

<input

type="radio"

name="feeling"

value="Sad"

checked={feeling === "Sad"}

onChange={(e) => setFeeling(e.target.value)}

Sad

</label>

<label>

<input

type="radio"

name="feeling"

value="Excited"

checked={feeling === "Excited"}

onChange={(e) => setFeeling(e.target.value)}

Excited

</label>

<button type="submit">Submit</button>

</form>

);

}

export default SurveyForm;

✅ Dynamic Radio Buttons (From Array)

import { useState } from "react";

function DynamicRadio() {
const [fruit, setFruit] = useState("");

const fruits = ["Apple", "Banana", "Grapes", "Mango"];

return (
<>
<h3>Select Your Favorite Fruit:</h3>

{fruits.map((item, index) => (
<label key={index}>
<input
type="radio"
name="fruit"
value={item}
checked={fruit === item}
onChange={(e) => setFruit(e.target.value)}
/>
{item}
</label>
))}

<p>Selected Fruit: {fruit}</p>
</>
);
}

import { useState } from "react";

function DynamicRadio() {

const [fruit, setFruit] = useState("");

const fruits = ["Apple", "Banana", "Grapes", "Mango"];

return (

<h3>Select Your Favorite Fruit:</h3>

{fruits.map((item, index) => (

<input

type="radio"

name="fruit"

value={item}

checked={fruit === item}

onChange={(e) => setFruit(e.target.value)}

{item}

</label>

))}

<p>Selected Fruit: {fruit}</p>

</>

);

}

export default DynamicRadio;

🧠 Best Practices

✔ Group radio buttons using the same name
✔ Use checked={state === value} to control UI selection
✔ Store selected value as a string
✔ Use arrays for reusable or large option lists

🎯 Summary

Feature	Radio	Checkbox
Selection Type	One option only	Multiple options allowed
Data Type	Single value (string)	Array or boolean
Use Case	Gender selection, payment method	Hobbies, preferences

React Forms Radio Buttons