Checkbox

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.

Feedback

Having troubles with the guide? Please give us more details and we'll get back to you soon.

Chat with the team