<input type="checkbox"> represents an independent on/off choice — each checkbox is its own separate toggle, unrelated to any others on the page unless you deliberately group them.
Syntax
<input type="checkbox" name="subscribe" id="subscribe" checked>
<label for="subscribe">Subscribe to newsletter</label>Basic Example
<input type="checkbox" id="terms" name="terms" required>
<label for="terms">I agree to the Terms and Conditions</label>Browser output: a small square box the user can click to toggle checked/unchecked; the label text is also clickable, toggling the checkbox too, since they're properly associated.
How It Works
A checked checkbox submits its value (defaulting to "on" if unspecified) under its name. An unchecked checkbox sends nothing at all — its name doesn't appear in the submitted data whatsoever, which trips up a lot of beginners expecting a "false" value.
Important Attributes
| Attribute | Purpose |
|---|---|
checked | Pre-checks the box by default |
value | What gets submitted when checked (defaults to "on") |
name | Use the same name with [] across several checkboxes to collect them as one array of selected values |
Real-World Example
<fieldset>
<legend>Which topics interest you?</legend>
<input type="checkbox" id="topic-ai" name="topics[]" value="ai">
<label for="topic-ai">AI & Machine Learning</label>
<input type="checkbox" id="topic-web" name="topics[]" value="web">
<label for="topic-web">Web Development</label>
</fieldset>Multiple independent checkboxes sharing a name with [] — any number of them can be checked, and the server receives an array of every selected value.
Common Mistakes
- Expecting an unchecked checkbox to submit as
falseor empty — it submits nothing at all, which server-side code must account for - Skipping a real
<label>and relying on nearby text alone — this loses the larger, more forgiving click target a proper label provides
Best Practices
- Always pair each checkbox with a real, associated
<label> - Group related checkboxes in a
<fieldset>with a<legend>
Accessibility Considerations
A properly labeled checkbox lets users click either the box or its text to toggle it — a meaningfully larger, more forgiving target than the tiny checkbox square alone, which matters a great deal for users with motor impairments.
SEO Considerations
No direct ranking effect.
Browser & Modern HTML Notes
Checkbox appearance can be styled with modern CSS (including the accent-color property for a quick native-looking color change) without needing to fully rebuild the control from scratch.
Mini Practice
- Build 3 independent, properly labeled checkboxes for a "select your interests" section.
- Explain what value is submitted for an unchecked checkbox with no explicit
valueattribute.
