Checkboxes

Let users select one or more options from a selection by using the checkboxes component.

Don't use checkboxes if users can only select one option from a selection. In this case, use the Radio buttons component instead.

With label

<form>
  <fieldset class="field field--set">
    <legend class="field__label field__label--block">
      Which types of waste do you transport?
    </legend>

    <div class="bcc-form-block">
      <input
        class="field__input"
        type="checkbox"
        name="options"
        id="waste-animal"
      />
      <label
        class="field__label field__label--block has-mb-2"
        for="waste-animal"
        >Waste from animal carcasses</label
      >
      <input
        class="field__input"
        type="checkbox"
        name="options"
        id="waste-mines"
      />
      <label class="field__label field__label--block has-mb-2" for="waste-mines"
        >Waste from mines or quarries</label
      >
      <input
        class="field__input"
        type="checkbox"
        name="options"
        id="waste-farm"
      />
      <label class="field__label field__label--block has-mb-2" for="waste-farm"
        >Farm or agricultural waste</label
      >
    </div>
  </fieldset>
</form>

With label and hint

You can add hints to checkbox items to provide additional information about the options.

<fieldset class="field field--set">
  <legend class="field__label field__label--block">
    Will you be travelling to any of these countries?
    <h6 class="field__instructions">Select all countries that apply.</h6>
  </legend>

  <div class="bcc-form-block">
    <input class="field__input" type="checkbox" name="options" id="france" />
    <label class="field__label field__label--block" for="france">France</label>

    <input class="field__input" type="checkbox" name="options" id="portugal" />
    <label class="field__label field__label--block" for="portugal"
      >Portugal</label
    >
    <div class="field__add-info field__add-info--block" for="portugal">
      Further text to explain your label text.
    </div>

    <input class="field__input" type="checkbox" name="options" id="spain" />
    <label class="field__label field__label--block" for="spain">Spain</label>

    <input class="field__input" type="checkbox" name="options" id="other" />
    <label class="field__label field__label--block" for="other"
      >No, I will not be travelling to any of these countries.</label
    >
  </div>
</fieldset>

With multiline label and hint

You can add a multiline label to a checkbox item to provide additional information about that option.

<fieldset class="field field--set">
  <legend class="field__label field__label--block">
    Will you be travelling to any of these countries?
    <h6 class="field__instructions">Select all countries that apply.</h6>
  </legend>

  <div class="bcc-form-block">
    <input class="field__input" type="checkbox" name="options" id="france" />
    <label class="field__label field__label--block" for="france">France</label>

    <input class="field__input" type="checkbox" name="options" id="portugal" />
    <label class="field__label field__label--block" for="portugal"
      >Portugal</label
    >
    <div class="field__add-info field__add-info--block" for="portugal">
      Further text to explain your label text.
    </div>

    <input class="field__input" type="checkbox" name="options" id="spain" />
    <label class="field__label field__label--block" for="spain">Spain</label>

    <input class="field__input" type="checkbox" name="options" id="other" />
    <label class="field__label field__label--block" for="other"
      >No, I will not be travelling to any of these countries.</label
    >
  </div>
</fieldset>

Single checkbox with a label

You can use a single checkbox item when you need users to confirm they agree to the terms and conditions.

Declaration

By continuing you confirm that:

the information you've given is correct.
you agree to the terms and conditions.

<h3 class="h3">Declaration<</h3>
<p class="paragraph">By continuing you confirm that:</p>
<ul class="default-list">
  <li>the information you've given is correct.</li>
  <li>you agree to the <a href="#"><strong>terms and conditions</strong></li>.
</ul>

<fieldset class="field field--set">
  <legend class="field__label field__label--block">
    You could be prosecuted if you deliberately give untrue or misleading information.
  </legend>

  <div class="bcc-form-block">
    <input class="field__input" type="checkbox" name="options" id="terms" />
    <label class="field__label field__label--block" for="terms">I agree</label>
  </div>
</fieldset>

With error

Display an inline error when there's something wrong. Example, If JavaScript is unavailable, and a user do not select any of the options, display an error message.

Make sure:

The form control has the aria-describedby attribute and references an associated error message
The associated error message has a unique ID

Remove the error state when the checkboxes are updated, to avoid confusing users.

To do this:

Remove the field--error class
Remove the <div> element with the class field__message field__message--error

Refresh this page to reset the error state in this example.

<fieldset
  aria-describedby="options-error"
  id="contact"
  class="field field--set field--error"
>
  <legend class="field__label field__label--block">
    How would you like to be contacted?
  </legend>

  <div class="bcc-form-block">
    <input class="field__input" type="checkbox" name="options" id="email" />
    <label class="field__label__error field__label--block" for="email"
      >Email</label
    >
    <input class="field__input" type="checkbox" name="options" id="text-msg" />
    <label class="field__label__error field__label--block" for="text-msg"
      >Text Message</label
    >
    <input class="field__input" type="checkbox" name="options" id="phone" />
    <label class="field__label__error field__label--block" for="phone"
      >Phone</label
    >
  </div>

  <div id="options-error" class="field__message field__message--error">
    At least one selection is required
  </div>
</fieldset>

With label​

With label and hint​

Select all countries that apply.

With multiline label and hint​