A group of radio buttons is created simply by giving multiple `<input type="radio">` elements the **same `name`** — the browser then enforces that only one of them can be checked at a time, automatically unchecking any previously selected option in that group when a new one is picked. Only the CHECKED radio button's `value` gets submitted with the form under that shared name; unchecked ones contribute nothing.
1Understanding Radio Buttons
A group of radio buttons is created simply by giving multiple <input type="radio"> elements the same `name` — the browser then enforces that only one of them can be checked at a time, automatically unchecking any previously selected option in that group when a new one is picked. Only the CHECKED radio button's value gets submitted with the form under that shared name; unchecked ones contribute nothing.
Forgetting to give every radio button in a group the exact same name is one of the most common form bugs — without a shared name, each one behaves as its own independent (and pointless) single-option group.
<fieldset>
<legend>Preferred size</legend>
<label><input type="radio" name="size" value="s"> Small</label>
<label><input type="radio" name="size" value="m" checked> Medium</label>
<label><input type="radio" name="size" value="l"> Large</label>
</fieldset>2Practical Example
Here is a real-world application of Radio Buttons showing how it is used in production HTML.
<!-- Reading the selected radio value in JavaScript -->
<script>
const selected = document.querySelector('input[name="size"]:checked');
console.log(selected.value); // 'm'
</script>3Best Practices
Follow these guidelines when working with Radio Buttons:
1. Give every radio button in the same logical group the identical name attribute
2. Wrap the whole group in a <fieldset> with a <legend> describing the overall question
3. Pre-check a sensible default with the checked attribute when one option should be selected initially
Tip: Forgetting to give every radio button in a group the exact same name is one of the most common form bugs — without a shared name, each one behaves as its own independent (and pointless) single-option group.
<fieldset>
<legend>Preferred size</legend>
<label><input type="radio" name="size" value="s"> Small</label>
<label><input type="radio" name="size" value="m" checked> Medium</label>
<label><input type="radio" name="size" value="l"> Large</label>
</fieldset>