Checkboxes allow users to select one or more options from a set of choices. Unlike radio buttons, checkboxes permit multiple selections, making them perfect for scenarios where users can choose several items from a list.
What Are Checkboxes?
Checkboxes are small, clickable boxes that can be toggled on (checked) or off (unchecked). They're commonly used for:
- Accepting terms and conditions
- Selecting multiple interests or preferences
- Newsletter subscriptions
- Filter options in search forms
- Todo lists and task completion
- Selecting items for bulk actions
Basic Checkbox Syntax
Checkboxes use the input element with type="checkbox":
basic-checkbox.html
<!-- Simple checkbox -->
<input type="checkbox" id="subscribe" name="subscribe">
<label for="subscribe">Subscribe to newsletter</label>
<!-- Checkbox with label wrapping it -->
<label>
<input type="checkbox" name="terms">
I agree to the terms and conditions
</label>Important Checkbox Attributes
name
The name attribute identifies the checkbox data when the form is submitted:
checkbox-name.html
<input type="checkbox" id="newsletter" name="newsletter">
<label for="newsletter">Subscribe to newsletter</label>value
The value attribute defines what data is sent when the checkbox is checked. If not specified, the default value is "on".
checkbox-value.html
<!-- Without value attribute (sends "on" when checked) -->
<input type="checkbox" name="newsletter">
<!-- With value attribute (sends "yes" when checked) -->
<input type="checkbox" name="newsletter" value="yes">
<!-- Custom value -->
<input type="checkbox" name="color" value="blue">
<label for="blue">Blue</label>checked
The checked attribute makes a checkbox selected by default:
checkbox-checked.html
<!-- Pre-checked checkbox -->
<input type="checkbox" id="terms" name="terms" checked>
<label for="terms">I agree to the terms</label>
<!-- Unchecked by default -->
<input type="checkbox" id="updates" name="updates">
<label for="updates">Receive updates</label>required
Makes the checkbox mandatory—user must check it to submit the form:
checkbox-required.html
<input type="checkbox" id="agree" name="agree" required>
<label for="agree">
I agree to the terms and conditions *
</label>disabled
Disables the checkbox so users cannot interact with it:
checkbox-disabled.html
<!-- Disabled and unchecked -->
<input type="checkbox" id="unavailable" name="unavailable" disabled>
<label for="unavailable">Currently unavailable</label>
<!-- Disabled but checked -->
<input type="checkbox" id="confirmed" name="confirmed" checked disabled>
<label for="confirmed">Already confirmed</label>Multiple Checkboxes
The power of checkboxes is allowing multiple selections. Users can check as many boxes as they want:
multiple-checkboxes.html
<fieldset>
<legend>Select your interests:</legend>
<div>
<input type="checkbox" id="sports" name="interests" value="sports">
<label for="sports">Sports</label>
</div>
<div>
<input type="checkbox" id="music" name="interests" value="music">
<label for="music">Music</label>
</div>
<div>
<input type="checkbox" id="reading" name="interests" value="reading">
<label for="reading">Reading</label>
</div>
<div>
<input type="checkbox" id="travel" name="interests" value="travel">
<label for="travel">Travel</label>
</div>
</fieldset>When multiple checkboxes share the same name, only the checked values are submitted to the server. If none are checked, nothing is sent for that name.
Styling Checkboxes
Default checkboxes can look different across browsers. Here's how to style them for a consistent appearance:
styled-checkboxes.html
<style>
.checkbox-container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 15px;
cursor: pointer;
font-size: 16px;
user-select: none;
}
/* Hide default checkbox */
.checkbox-container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
background-color: #eee;
border: 2px solid #ddd;
border-radius: 4px;
}
/* On hover */
.checkbox-container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When checked */
.checkbox-container input:checked ~ .checkmark {
background-color: #4CAF50;
border-color: #4CAF50;
}
/* Create checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show checkmark when checked */
.checkbox-container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark */
.checkbox-container .checkmark:after {
left: 6px;
top: 2px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
</style>
<label class="checkbox-container">Subscribe to newsletter
<input type="checkbox" name="newsletter">
<span class="checkmark"></span>
</label>
<label class="checkbox-container">I agree to terms
<input type="checkbox" name="terms">
<span class="checkmark"></span>
</label>Organizing Checkbox Groups
Use fieldsets and legends to group related checkboxes for better organization and accessibility:
checkbox-groups.html
<form>
<fieldset>
<legend>Pizza Toppings (select all that apply):</legend>
<div>
<input type="checkbox" id="pepperoni" name="toppings" value="pepperoni">
<label for="pepperoni">Pepperoni</label>
</div>
<div>
<input type="checkbox" id="mushrooms" name="toppings" value="mushrooms">
<label for="mushrooms">Mushrooms</label>
</div>
<div>
<input type="checkbox" id="onions" name="toppings" value="onions">
<label for="onions">Onions</label>
</div>
<div>
<input type="checkbox" id="peppers" name="toppings" value="peppers">
<label for="peppers">Bell Peppers</label>
</div>
</fieldset>
<fieldset>
<legend>Delivery Options:</legend>
<div>
<input type="checkbox" id="contactless" name="delivery" value="contactless">
<label for="contactless">Contactless delivery</label>
</div>
<div>
<input type="checkbox" id="utensils" name="delivery" value="utensils">
<label for="utensils">Include utensils</label>
</div>
</fieldset>
<button type="submit">Place Order</button>
</form>Practical Examples
Terms and Conditions
terms-checkbox.html
<form action="/register" method="post">
<h3>Create Account</h3>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<div>
<input type="checkbox" id="terms" name="terms" required>
<label for="terms">
I agree to the <a href="/terms">Terms and Conditions</a> *
</label>
</div>
<div>
<input type="checkbox" id="newsletter" name="newsletter" value="yes">
<label for="newsletter">
Send me promotional emails and updates
</label>
</div>
<button type="submit">Register</button>
</form>User Preferences Form
preferences-form.html
<form action="/save-preferences" method="post">
<h3>Notification Preferences</h3>
<fieldset>
<legend>Email Notifications:</legend>
<div>
<input type="checkbox" id="order-updates" name="email" value="orders" checked>
<label for="order-updates">Order updates</label>
</div>
<div>
<input type="checkbox" id="promotions" name="email" value="promotions">
<label for="promotions">Promotions and offers</label>
</div>
<div>
<input type="checkbox" id="newsletter-pref" name="email" value="newsletter">
<label for="newsletter-pref">Weekly newsletter</label>
</div>
</fieldset>
<fieldset>
<legend>SMS Notifications:</legend>
<div>
<input type="checkbox" id="sms-delivery" name="sms" value="delivery">
<label for="sms-delivery">Delivery notifications</label>
</div>
<div>
<input type="checkbox" id="sms-special" name="sms" value="special">
<label for="sms-special">Special offers</label>
</div>
</fieldset>
<button type="submit">Save Preferences</button>
</form>Search Filter Form
filter-form.html
<form action="/search" method="get">
<h3>Filter Products</h3>
<input type="search" name="q" placeholder="Search products...">
<fieldset>
<legend>Categories:</legend>
<div>
<input type="checkbox" id="electronics" name="category" value="electronics">
<label for="electronics">Electronics</label>
</div>
<div>
<input type="checkbox" id="clothing" name="category" value="clothing">
<label for="clothing">Clothing</label>
</div>
<div>
<input type="checkbox" id="books" name="category" value="books">
<label for="books">Books</label>
</div>
</fieldset>
<fieldset>
<legend>Price Range:</legend>
<div>
<input type="checkbox" id="under-25" name="price" value="0-25">
<label for="under-25">Under $25</label>
</div>
<div>
<input type="checkbox" id="25-50" name="price" value="25-50">
<label for="25-50">$25 - $50</label>
</div>
<div>
<input type="checkbox" id="over-50" name="price" value="50+">
<label for="over-50">Over $50</label>
</div>
</fieldset>
<button type="submit">Apply Filters</button>
</form>Best Practices
Always Use Labels
Every checkbox should have a label that users can click:
checkbox-labels-best.html
<!-- Good: Label connected with for attribute -->
<input type="checkbox" id="agree" name="agree">
<label for="agree">I agree to the terms</label>
<!-- Also good: Label wrapping checkbox -->
<label>
<input type="checkbox" name="agree">
I agree to the terms
</label>
<!-- Bad: No label -->
<input type="checkbox" name="agree"> I agree to the termsUse Descriptive Values
Give checkboxes meaningful values for easier data processing:
descriptive-values.html
<!-- Good: Descriptive values -->
<input type="checkbox" name="interests" value="web-development">
<input type="checkbox" name="interests" value="mobile-apps">
<input type="checkbox" name="interests" value="data-science">
<!-- Bad: Generic values -->
<input type="checkbox" name="interests" value="1">
<input type="checkbox" name="interests" value="2">
<input type="checkbox" name="interests" value="3">Group Related Options
Use fieldsets to group related checkboxes:
grouped-checkboxes.html
<fieldset>
<legend>Contact Preferences:</legend>
<input type="checkbox" id="email" name="contact" value="email">
<label for="email">Email</label>
<input type="checkbox" id="phone" name="contact" value="phone">
<label for="phone">Phone</label>
</fieldset>Accessibility Considerations
- Always associate checkboxes with labels using
forandid - Use fieldset and legend for groups of related checkboxes
- Ensure clickable areas are large enough (minimum 44x44 pixels)
- Provide clear, descriptive label text
- Make focus states visible for keyboard navigation
- Use required attribute when checkboxes are mandatory
- Don't rely on color alone to indicate checkbox state
Key Takeaways
- Checkboxes allow multiple selections from a list
- Use
type="checkbox"to create checkboxes - The
checkedattribute pre-selects a checkbox - The
valueattribute defines submitted data - Multiple checkboxes can share the same
nameattribute - Always provide labels for accessibility
- Use fieldsets to group related checkboxes
- Only checked checkboxes send data when the form is submitted
What's Next?
Now that you understand checkboxes for multiple selections, the next lesson will cover radio buttons—similar to checkboxes but allowing only one selection from a group of options.