<input type="radio"> lets a user pick exactly one option from a group — sharing the same name is what turns several radio buttons into one mutually exclusive group.
Syntax
<input type="radio" name="plan" value="basic" id="plan-basic">
<label for="plan-basic">Basic</label>
<input type="radio" name="plan" value="pro" id="plan-pro">
<label for="plan-pro">Pro</label>Basic Example
<fieldset>
<legend>Preferred class mode</legend>
<input type="radio" id="mode-live" name="mode" value="live" checked>
<label for="mode-live">Live Online</label>
<input type="radio" id="mode-recorded" name="mode" value="recorded">
<label for="mode-recorded">Recorded</label>
</fieldset>Browser output: two circular buttons; selecting one automatically deselects the other, because they share the same name="mode". Only ever one can be checked within that shared group at a time.
How It Works
Only the currently selected radio button in a named group submits its value — every unselected one in that group sends nothing, exactly like an unchecked checkbox. If none is pre-checked and the user never interacts with the group, no value is submitted at all for that field.
Important Attributes
| Attribute | Purpose |
|---|---|
name | Must be identical across every button in the same mutually-exclusive group |
value | What's submitted for that specific option if it's the one selected |
checked | Pre-selects one option as the default |
Comparison: checkbox vs radio
checkbox | radio | |
|---|---|---|
| Selections allowed | Any number, including zero or all | Exactly one within a shared name group |
| Typical use | "Select all that apply" | "Choose exactly one option" |
Real-World Example
<fieldset>
<legend>Payment Method</legend>
<input type="radio" id="pay-card" name="payment" value="card" checked>
<label for="pay-card">Credit/Debit Card</label>
<input type="radio" id="pay-upi" name="payment" value="upi">
<label for="pay-upi">UPI</label>
</fieldset>A textbook radio-button use case — payment method selection where exactly one option must be chosen, never more than one.
Common Mistakes
- Giving each radio button in what should be one group a different
name— this accidentally breaks the mutual exclusivity, letting multiple "options" be selected at once - Leaving no option pre-
checkedwhen one really should be the sensible default
Best Practices
- Always use the exact same
nameacross every button in a group - Group radio buttons inside a
<fieldset>/<legend>describing the overall choice being made
Accessibility Considerations
Screen readers announce a radio group's total option count and current position ("radio button, 2 of 3") when the group is correctly built with a shared name and a <legend> describing the choice.
SEO Considerations
No direct ranking effect.
Browser & Modern HTML Notes
Arrow keys move focus between radio buttons that share the same name, automatically selecting each one as you go — genuinely useful, native keyboard behavior with zero extra code.
Mini Practice
- Build a 3-option radio group for choosing a class time slot, with one pre-selected.
- Spot and fix a radio group where each button was accidentally given a different
name.
