Radio Button

By the end of this lesson, you will be able to create mutually exclusive selection groups using HTML radio buttons and distinguish their behavior from checkboxes.

What it is

A radio button is an input element that allows a user to select one option from a predefined set. The defining characteristic of radio buttons is mutual exclusivity: within a specific group, selecting one option automatically deselects any previously selected option in that same group. This behavior mimics physical car radios, where pressing one preset button ejects the currently playing one.

The key technical mechanism for grouping is the name attribute. All radio inputs sharing the exact same name value belong to the same logical group. Related terms include "input type," "checked state," and "form submission."

Why it matters

• Clarity: It visually communicates to users that only one choice is valid, reducing cognitive load.
• Data Integrity: It prevents invalid form submissions where multiple conflicting options might be sent simultaneously.
• Accessibility: Screen readers announce radio groups as a single unit, helping users understand the relationship between options.
• Simplicity: No JavaScript is required to enforce the "one-of-many" logic; the browser handles it natively via the name attribute.

Syntax or steps

To create a functional radio group, follow these steps:

1. Create an <input> element with type="radio".
2. Assign a unique id to each input for labeling purposes.
3. Give every input in the group the same name attribute.
4. Add a value attribute to define what data is sent when that option is selected.
5. Link a <label> element to the input using the for attribute matching the input's id.

Example

<form action="/submit" method="post">
  <p>Select your preferred contact method:</p>
  
  <div>
    <input type="radio" id="email" name="contact_method" value="email" checked>
    <label for="email">Email</label>
  </div>
  
  <div>
    <input type="radio" id="phone" name="contact_method" value="phone">
    <label for="phone">Phone</label>
  </div>
  
  <div>
    <input type="radio" id="mail" name="contact_method" value="mail">
    <label for="mail">Physical Mail</label>
  </div>
  
  <button type="submit">Send</button>
</form>

Explanation: Notice that all three inputs share name="contact_method". This binds them into a single group. If a user clicks "Phone," the browser automatically unchecks "Email." The checked attribute on the first input sets Email as the default selection. When submitted, the server receives contact_method=phone (or whichever was selected).

Common mistakes

• Mismatched Names: If two radio buttons have different name values, they are independent. Users can select both, breaking mutual exclusivity. Always ensure the name is identical across the group.
• Missing Labels: Clicking directly on small radio circles is difficult for users with motor impairments. Without a linked <label>, clicking the text does not select the option. Always use for="id".
• No Default Selection: While not strictly an error, leaving no radio button checked by default can confuse users about whether a selection is mandatory. Consider setting a sensible default or adding a "None" option if appropriate.
• Using Checkboxes Instead: Developers sometimes use checkboxes for single-choice questions because they look similar. This is semantically incorrect and confuses assistive technologies.

When to use it

Use radio buttons when the user must choose exactly one option from a list. Use checkboxes when the user can choose zero, one, or many options.

Practice

Guided Exercise: Create a form asking for a user's subscription tier: Free, Basic, or Premium. Ensure only one can be selected and that "Basic" is the default.

Challenge: Add a fourth option called "Custom" with a text input next to it. Write a brief note on why you cannot simply add a text input inside the radio group without JavaScript validation.

Hint: Radio groups handle discrete choices. A text field requires free-form input, which breaks the "one-of-many" model unless you treat "Custom" as a separate logical step.

Quick check

Question: What happens if you remove the name attribute from a radio button?

Answer: The browser treats it as an isolated control. It will not participate in mutual exclusivity with other radio buttons, meaning users could potentially select multiple options if they click rapidly, or the form may fail to submit the expected key-value pair correctly.

Summary

Radio buttons provide a native, accessible way to enforce single-choice selections through the shared name attribute. They differ fundamentally from checkboxes by limiting selection to one item per group, ensuring cleaner data and clearer user intent.