0Pricing
HTML Academy · Lesson

Checkbox and Radio Button Groups

Let users pick one or many options from a group.

Checkbox and Radio Button Groups is a free HTML Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Checkboxes

Checkboxes let users select zero, one, or many options:

<label>
  <input type="checkbox" name="terms" value="agreed"> I agree to the Terms
</label>

<!-- Each checkbox is independent -->
<!-- checked attribute = pre-checked -->
<input type="checkbox" name="newsletter" value="yes" checked>

Checkbox Submission

Checkboxes only submit if checked:

<form>
  <input type="checkbox" name="hobby" value="reading"> Reading<br>
  <input type="checkbox" name="hobby" value="coding"> Coding<br>
  <input type="checkbox" name="hobby" value="gaming"> Gaming<br>
</form>
<!-- If reading and coding are checked:
     hobby=reading&hobby=coding -->
<!-- Unchecked boxes send nothing -->

Checkbox Groups with fieldset

Group related checkboxes with fieldset + legend:

<fieldset>
  <legend>Select your interests</legend>

  <label><input type="checkbox" name="interest" value="html"> HTML</label>
  <label><input type="checkbox" name="interest" value="css"> CSS</label>
  <label><input type="checkbox" name="interest" value="js"> JavaScript</label>
  <label><input type="checkbox" name="interest" value="python"> Python</label>
</fieldset>

Radio Buttons

Radio buttons let users pick exactly one option from a group:

<fieldset>
  <legend>Preferred plan</legend>

  <label><input type="radio" name="plan" value="free"> Free</label>
  <label><input type="radio" name="plan" value="pro"> Pro</label>
  <label><input type="radio" name="plan" value="enterprise"> Enterprise</label>
</fieldset>
<!-- All radios in a group share the same name attribute -->
<!-- Selecting one deselects the others -->

checked Attribute

Pre-select a radio button or checkbox with the checked attribute:

<fieldset>
  <legend>Skill level</legend>
  <label><input type="radio" name="level" value="beginner" checked> Beginner</label>
  <label><input type="radio" name="level" value="intermediate"> Intermediate</label>
  <label><input type="radio" name="level" value="advanced"> Advanced</label>
</fieldset>

Styling Checkboxes and Radios

Custom styled checkboxes using the label trick:

<label class="custom-check">
  <input type="checkbox" name="agree">
  <span class="checkmark"></span>
  I agree
</label>

/* Hide native input, style the span: */
.custom-check input { opacity: 0; width: 0; }
.checkmark {
  width: 1.25rem; height: 1.25rem;
  border: 2px solid #ddd; border-radius: 3px;
  display: inline-block; vertical-align: middle;
}
.custom-check input:checked + .checkmark { background: #0070f3; }

indeterminate State

Checkboxes can have an indeterminate state (neither checked nor unchecked):

<input type="checkbox" id="select-all">

<script>
// Set via JavaScript only -- no HTML attribute
document.getElementById('select-all').indeterminate = true;
// Visually shown as a dash (−) in most browsers
// Used for "select all" when some children are checked
</script>

radio without Default Selection

Sometimes it is better not to pre-select a radio button:

  • Pre-selection implies the option is recommended
  • For required choices with no clear default (gender, plan), leave unselected
  • Add required to ensure users make an explicit choice
<fieldset>
  <legend>Gender</legend>
  <label><input type="radio" name="gender" value="m" required> Male</label>
  <label><input type="radio" name="gender" value="f" required> Female</label>
  <label><input type="radio" name="gender" value="nb" required> Non-binary</label>
  <label><input type="radio" name="gender" value="prefer_not" required> Prefer not to say</label>
</fieldset>

Checkbox: checked vs value

Two important things about checkbox submission:

<!-- The value sent when checked: -->
<input type="checkbox" name="subscribe" value="yes">
<!-- Submits: subscribe=yes when checked -->
<!-- If value is omitted, default value is 'on' -->

<!-- JavaScript checked state: -->
const cb = document.querySelector('input[name="subscribe"]');
console.log(cb.checked);    // true or false
console.log(cb.value);      // 'yes' (always, even when unchecked)

Keyboard Navigation of Radio Groups

Keyboard behavior for radio groups:

  • Tab moves focus into the group to the selected or first radio
  • Arrow keys (↑/↓ or ←/→) cycle through options
  • Tab moves out of the group to the next focusable element

Select All Pattern

Select/deselect all checkboxes pattern:

<label>
  <input type="checkbox" id="select-all"> Select all
</label>
<fieldset id="items">
  <label><input type="checkbox" class="item" value="1"> Item 1</label>
  <label><input type="checkbox" class="item" value="2"> Item 2</label>
  <label><input type="checkbox" class="item" value="3"> Item 3</label>
</fieldset>
<script>
document.getElementById('select-all').addEventListener('change', function() {
  document.querySelectorAll('.item').forEach(cb => cb.checked = this.checked);
});
</script>

Quick Check

What name attribute rule makes radio buttons belong to the same group?

Recap: Checkboxes and Radios

Checkbox and radio essentials:

  • Checkbox — select multiple; submits only when checked
  • Radio — select exactly one; grouped by name
  • Both use checked attribute for pre-selection
  • Wrap in <fieldset> + <legend>
  • Arrow keys navigate within a radio group

Frequently asked questions

Is the “Checkbox and Radio Button Groups” lesson free?

Yes — the full text of “Checkbox and Radio Button Groups” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.

What will I learn in “Checkbox and Radio Button Groups”?

Let users pick one or many options from a group. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start HTML Academy?

No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Checkbox and Radio Button Groups” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this HTML Academy lesson?

Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Select and option Dropdown Menus
  2. Textarea for Multi-line Input
  3. Checkbox and Radio Button Groups
  4. Datalist for Autocomplete
← Back to HTML Academy