Web forms frequently require users to make a strict, mutually exclusive choice from a list—like picking a shipping method or selecting an operating system. When a user can definitively select exactly one option, the `<input type="radio">` element is the semantically correct and functionally engineered tool.
1The Exclusivity Engine
The defining architectural mechanism of a radio button isn't its circular shape—it's how it inherently interacts with its sibling elements. To activate mutual exclusivity, you must rigorously group the inputs using the name attribute.
If multiple <input type="radio"> elements share the exact same name attribute (e.g., name="os"), the browser's engine permanently binds them into a logical, mutually exclusive group. The moment a user clicks one radio button in the group, the browser automatically and instantly un-checks any previously selected option. This ensures the system mathematically guarantees a single, unified choice.
2Payloads & Label Targets
While the name attribute builds the logical visual group, it does not tell the backend *what* the user actually selected. You must explicitly assign a unique value attribute to every single radio button. When the user hits submit, the browser packages the shared group name alongside the specific value of the currently checked button (e.g., os=mac).
Crucially, native radio buttons are terribly tiny UI elements, causing massive friction on touch devices. You absolutely must map a semantic <label> to each radio input using the for and id linking attributes. This instantly expands the clickable 'hit area' from a tiny 13px circle to encompass the entire text string, solving mobile UX immediately.
3Semantic Grouping & Styling
Radio buttons act as answers to a single overarching question. Visually, humans understand this context. However, screen readers need explicit semantic structure. You must wrap the entire group in a <fieldset>, utilizing a <legend> to act as the title/question. This ensures the screen reader announces the context correctly before traversing the inputs.
Additionally, it is best practice to guarantee a valid data payload by forcing an initial default state using the checked boolean attribute. Finally, modern CSS allows you to inject brand identity flawlessly using the accent-color property, replacing the native browser blue with your custom hex code instantly.
