SGDS v2.0 is here!
Check out the brand new v2.0 portal or click here for more information


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 class="control">
  <input type="checkbox" id="checkbox-2" />
  <label for="checkbox-2" class="checkbox" name="selected-features">Option 2</label>
<div class="control">
  <input type="checkbox" id="checkbox-3" disabled />
  <label for="checkbox-3" class="checkbox" name="selected-features" disabled>Option 3 - Disabled</label>

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.

Can't find a component?

Let us know what you need and we’ll be happy to look into it

Request component