How do radio buttons work in HTML forms?

Radio buttons let the user pick exactly one option from a set — and what binds them into a single mutually-exclusive group is sharing the same name attribute.

A radio button is an <input type="radio">. On its own it's just one toggle; the magic is that buttons sharing a name behave as one group where only a single choice can be active at a time:

<form>
    <label for="male">Male</label>
    <input type="radio" name="gender" id="male">

    <label for="female">Female</label>
    <input type="radio" name="gender" id="female">
</form>

Both inputs above carry name="gender", so selecting one automatically deselects the other. The three attributes each play a distinct role:

• name — groups the buttons; same name means one shared choice, different names mean independent selections.
• id — a unique identifier used to connect each button to its <label>.
• value — the data actually sent to the server when the form is submitted, identifying which option was chosen.

Common gotcha: forget the matching name and each radio becomes its own group, so the user can switch them all "on" at once.

Go deeper:

• <input type="radio"> — MDN — how shared name defines a group, plus value and default-checked behaviour.