Checkboxes and Radio Buttons

Learn when to use checkboxes (pick many) vs radio buttons (pick one), how grouping works, and why labels are even more critical for these small targets.

Step 1 of 6

Checkboxes — pick as many as you want

A checkbox lets the user toggle an option on or off. Unlike a text input where the user types something, a checkbox is a simple yes/no choice. When the form is submitted, only checked boxes send their data — unchecked boxes send nothing.

You create a checkbox with <input type="checkbox">. Each checkbox needs:

name — the key sent to the server
value — the value sent when the box is checked (if omitted, the browser sends "on")

The checked attribute makes a checkbox pre-selected when the page loads: <input type="checkbox" name="newsletter" value="yes" checked>

Checkboxes are independent — checking one has no effect on others. This is the key difference from radio buttons. Use checkboxes when the user can select zero, one, or many options from a list.

Real-world examples everywhere: Amazon's filter sidebar ("Free Shipping", "Prime", "4 Stars & Up" — you can check multiple), Gmail's message selection (check multiple emails to delete or archive), and Instagram's interest selection during signup (pick all topics that interest you).

Think of it this way: Think of checkboxes like a grocery shopping list. You walk down the aisle and check off items as you put them in your cart: eggs, milk, bread, butter. You can check as many items as you want, skip items, or check all of them. Each item is independent — getting eggs has nothing to do with getting bread. That's exactly how checkboxes work.

Learn more on MDN

HTMLMDN: <input type="checkbox">

HTMLREAD ONLY

PREVIEW