Overview
Checkboxes allow the user to select one or more items from a list.
Default Checkboxes
<div class="control">
<input type="checkbox" id="checkbox-1" />
<label for="checkbox-1" class="checkbox" name="selected-features">Option 1</label>
</div>
<div class="control">
<input type="checkbox" id="checkbox-2" />
<label for="checkbox-2" class="checkbox" name="selected-features">Option 2</label>
</div>
<div class="control">
<input type="checkbox" id="checkbox-3" disabled />
<label for="checkbox-3" class="checkbox" name="selected-features" disabled>Option 3 - Disabled</label>
</div>Other Checkbox Behaviour
When checkboxes are part of a <form>,
you can control the form's behaviour using the name
and value attributes on checkbox inputs.
When a form containing checkboxes is submitted, only checkboxes which are currently
checked are submitted to the server, with key-value pairs defined by their
name and value attributes.
For more information, see MDN.
When to use
Checkboxes should be used when:
- You want users to select multiple items from a predetermined list of items.
- Your users need to see all available options at once.
Checkboxes should not be used for:
- Selection of 1 option from a predetermined list of items.
- Using radio buttons would be more appropriate.
Can't find a component?
Let us know what you need and we’ll be happy to look into it