Checkbox

Overview

Checkboxes let users select one or more options from a list


Default checkbox

<div class="control">
  <input type="checkbox" id="input-1" />
  <label for="input-1" class="checkbox" name="selected-features">Option 1</label>
</div>
<div class="control">
  <input type="checkbox" id="input-2" />
  <label for="input-2" class="checkbox" name="selected-features">Option 2</label>
</div>
<div class="control">
  <input type="checkbox" id="input-3" disabled />
  <label for="input-3" class="checkbox" name="selected-features" disabled>Option 3 - Disabled</label>
</div>

Checkbox behaviour

When checkboxes are part of a <form>, you can use Use the name and value attributes on checkbox inputs to control the form's behaviour.

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 you should use this component

You should use this component when you want users to select multiple items from a predetermined list of items or when your users need to see all available options at once.

When you should consider something else

When you have too many options to be displayed. If users can only select one option from the list, then using radio buttons would be more appropriate.


Feedback

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

Chat with the team