HTML radio input: single‑choice groups that make sense
The HTML <input type="radio"> lets users pick one option from a set. Radios are perfect when choices are mutually exclusive: shipping methods, sizes, yes/no questions, or payment types. The key to great radios is grouping: all options in a set share the same name attribute and are wrapped in a <fieldset> with a clear <legend>. This structure provides meaning for screen readers and a visual boundary for sighted users.
Labeling and values
Each radio needs its own label, connected via for/id. Use human‑readable labels (“Standard”, “Express”) and machine‑friendly value strings your server understands (“std”, “exp”). Defaults should reflect the most common, safest choice and must not mislead (avoid pre‑selecting upsells).
Accessibility checklist
- Group with
<fieldset>and a descriptive<legend>. - Ensure each option has a focusable radio and a clickable label.
- Keep the tab order logical; arrow keys should move between choices.
Copy‑ready patterns
- Shipping method: three radios inside a fieldset; default to the standard option.
- T‑shirt size: S/M/L/XL with concise labels and accessible legend.
- Yes/No: two radios named the same; avoid using a single checkbox when exclusivity matters.
Error handling
When no option is selected and the field is required, show an inline error linked via aria-describedby. Indicate the error in the legend, not just next to one radio, so users understand the group requires a choice.
Well‑structured radios guide users to a single, confident choice. With semantic grouping, clear labels, and honest defaults, they make forms faster and more predictable.