?️ HTML Radio Buttons and Checkboxes

⚡ Quick Overview

Radio buttons and checkboxes are used in forms to collect choices from users. Radio buttons allow exactly one selection within a group (all inputs share the same name), while checkboxes let users select any combination of options.

You should always pair these controls with clear labels, group related options using <fieldset> and <legend>, and submit stable value tokens that do not change when the UI text is translated.

? Key Concepts

? Radio Buttons

Use <input type="radio"> for single-choice selections.
All radios in one logical group share the same name attribute.
Only one radio in a group can be checked at a time.
Adding required to one radio makes the whole group mandatory.
Use checked for the default selected option.
disabled makes an option visible but not selectable.

☑️ Checkboxes

Use <input type="checkbox"> for multi-select choices.
Each checked box sends its own name and value on submit.
To submit multiple values under one key, many backends expect name="items[]".
Unchecked checkboxes are not submitted at all.
disabled prevents selection while still showing the option.
Use labels to increase the clickable area for better usability.

? Syntax & Theory

Basic HTML structure for radio buttons and checkboxes:

? View Basic Syntax

<!-- Radio button group (one choice only) -->
<input type="radio" id="contact-email" name="contact" value="email">
<label for="contact-email">Email</label>

<input type="radio" id="contact-phone" name="contact" value="phone">
<label for="contact-phone">Phone</label>

<!-- Checkbox group (any number of choices) -->
<input type="checkbox" id="fruit-apple"  name="fruits[]" value="apple">
<label for="fruit-apple">Apple</label>

<input type="checkbox" id="fruit-banana" name="fruits[]" value="banana">
<label for="fruit-banana">Banana</label>

Always group related controls for accessibility:

? View Fieldset Example

<fieldset>
  <legend>Preferred contact method</legend>
  <!-- radio / checkbox controls here -->
</fieldset>

? Radio Buttons Example

? View Code Example (Radios)

<!-- Radio button group: one choice only -->
<form action="#" onsubmit="return false;">
  <fieldset>
    <legend>Preferred contact method</legend>

    <input type="radio" id="r-email"   name="contact" value="email" required checked>
    <label for="r-email">Email</label><br>

    <input type="radio" id="r-phone"   name="contact" value="phone">
    <label for="r-phone">Phone</label><br>

    <input type="radio" id="r-none"    name="contact" value="none" disabled>
    <label for="r-none">No contact (disabled)</label>
  </fieldset>
  <button type="submit">Submit</button>
</form>

☑️ Checkboxes Example

? View Code Example (Checkboxes)

<!-- Checkbox group: any number of choices -->
<form action="#" onsubmit="return false;">
  <fieldset>
    <legend>Favorite fruits</legend>

    <input type="checkbox" id="c-apple"  name="fruits[]" value="apple" checked>
    <label for="c-apple">Apple</label><br>

    <input type="checkbox" id="c-banana" name="fruits[]" value="banana">
    <label for="c-banana">Banana</label><br>

    <input type="checkbox" id="c-cherry" name="fruits[]" value="cherry" disabled>
    <label for="c-cherry">Cherry (disabled)</label><br>
  </fieldset>
  <button type="submit">Submit</button>
</form>

? Live Output / Interactive Preview

? Live Output – Radios

☑️ Live Output – Checkboxes (with Select All)

? Preview JSON

{ }

The buttons above show what data would be submitted: radios send a single contact value, while checkboxes send an array of selected fruits[] values.

? Tips & Best Practices

Wrap related inputs in <fieldset> with a clear <legend> for accessibility.
Use a stable value (slug/code) such as email or phone instead of the label text.
For radio groups, a single required on any member makes the entire group required.
For multi-value checkboxes, many servers expect name="items[]" and will parse them into an array.
Remember: unchecked checkboxes are not submitted; if you need an explicit false, pair them with a hidden input.
Give each input a unique id and link its label with for for larger clickable areas.
Keep radio buttons in the same group using the same name; different names mean they can all be selected.
Avoid relying on label text for meaning: changing the wording should not break your backend logic.
Don’t mark every checkbox as required to enforce “at least one” — use custom validation instead.

? Try It Yourself / Practice Tasks

Add a hidden input: <input type="hidden" name="subscribe" value="no"> followed by <input type="checkbox" name="subscribe" value="yes"> and inspect the submitted values when checked vs unchecked.
Require “at least one fruit” by checking the checkbox group on submit and setting a custom error on the first checkbox if none are checked.
Extend the “Select all” checkbox so its indeterminate state reflects partial selections (already wired in the live example—read and adapt the JavaScript).
Build a survey section where each question uses radios for a 1–5 rating and one final checkbox for “I agree to the terms”, then validate before submission.

? Summary

Radios (type="radio") allow exactly one selected value per name group.
Checkboxes (type="checkbox") allow multiple selections and often use array-like names such as fruits[].
Group related options with <fieldset> and label everything clearly for accessibility.
Use stable value tokens and unique id values for reliable behavior.
Remember that unchecked checkboxes don’t submit data; handle booleans and “at least one” rules with extra logic.