Checkboxes and radios

Radio buttons and checkboxes allow users to select an answer from 2 or more options.

Example

Example

Checkboxes

Do you own:

Checkboxes with hint

Do you own:

Select all that apply

Checkboxes with error message

Do you own:

Select options owned by you

Checkboxes with hint and error message

Do you own:

Select all that apply

Select options owned by you

Single checkbox

Single checkbox with hint

Descriptive hint goes here

Single checkbox with error message

Please accept the terms and conditions

Single checkbox with hint and error message

Please accept the terms and conditions

Descriptive hint goes here

Radios

Type of delivery

Radios with hint

Type of delivery

Select only one option

Radios with error message

Type of delivery

Select type of delivery

Radios with hint and error message

Type of delivery

Select only one option

Select type of delivery

HTML

                                
<!-- Checkboxes -->
<form id="checkboxes" class="coop-form" novalidate>
  <h3>Checkboxes</h3>

  <fieldset id="checkbox-1" class="coop-form__row">
    <legend class="coop-form__label">Do you own:</legend>

    <p id="checkbox-1-error" class="coop-form__error" hidden></p>

    <div class="coop-form__choice">
      <input type="checkbox" name="checkbox-1" id="checkbox-1-1" value="1" class="coop-form__field coop-form__checkbox">
      <label for="checkbox-1-1" class="coop-form__label">a business</label>
    </div>

    <div class="coop-form__choice">
      <input type="checkbox" name="checkbox-1" id="checkbox-1-2" value="2" class="coop-form__field coop-form__checkbox">
      <label for="checkbox-1-2" class="coop-form__label">agricultural property</label>
    </div>

    <div class="coop-form__choice">
      <input type="checkbox" name="checkbox-1" id="checkbox-1-3" value="3" class="coop-form__field coop-form__checkbox">
      <label for="checkbox-1-3" class="coop-form__label">foreign property</label>
    </div>

    <div class="coop-form__choice">
      <input type="checkbox" name="checkbox-1" id="checkbox-1-4" value="4" class="coop-form__field coop-form__checkbox">
      <label for="checkbox-1-4" class="coop-form__label">trademarks or patents</label>
    </div>
  </fieldset>
</form>

                                
<!-- Checkboxes with hint -->
<form id="checkboxes-hint" class="coop-form" novalidate>
  <h3>Checkboxes with hint</h3>

  <fieldset id="checkbox-2" class="coop-form__row" aria-describedby="checkbox-2-hint">
    <legend class="coop-form__label">Do you own:</legend>

    <p id="checkbox-2-hint" class="coop-form__hint">Select all that apply</p>
    <p id="checkbox-2-error" class="coop-form__error" hidden></p>

    <div class="coop-form__choice">
      <input type="checkbox" name="checkbox-2" id="checkbox-2-1" value="1" class="coop-form__field coop-form__checkbox">
      <label for="checkbox-2-1" class="coop-form__label">a business</label>
    </div>

    <div class="coop-form__choice">
      <input type="checkbox" name="checkbox-2" id="checkbox-2-2" value="2" class="coop-form__field coop-form__checkbox">
      <label for="checkbox-2-2" class="coop-form__label">agricultural property</label>
    </div>

    <div class="coop-form__choice">
      <input type="checkbox" name="checkbox-2" id="checkbox-2-3" value="3" class="coop-form__field coop-form__checkbox">
      <label for="checkbox-2-3" class="coop-form__label">foreign property</label>
    </div>

    <div class="coop-form__choice">
      <input type="checkbox" name="checkbox-2" id="checkbox-2-4" value="4" class="coop-form__field coop-form__checkbox">
      <label for="checkbox-2-4" class="coop-form__label">trademarks or patents</label>
    </div>
  </fieldset>
</form>

                                
<!-- Checkboxes with error message -->
<form id="checkboxes-error" class="coop-form" novalidate>
  <h3>Checkboxes with error message</h3>

  <fieldset id="checkbox-3" class="coop-form__row" aria-describedby="checkbox-3-error">
    <legend class="coop-form__label">Do you own:</legend>

    <p id="checkbox-3-error" class="coop-form__error">Select options owned by you</p>

    <div class="coop-form__choice">
      <input type="checkbox" name="checkbox-3" id="checkbox-3-1" value="1" class="coop-form__field coop-form__checkbox">
      <label for="checkbox-3-1" class="coop-form__label">a business</label>
    </div>

    <div class="coop-form__choice">
      <input type="checkbox" name="checkbox-3" id="checkbox-3-2" value="2" class="coop-form__field coop-form__checkbox">
      <label for="checkbox-3-2" class="coop-form__label">agricultural property</label>
    </div>

    <div class="coop-form__choice">
      <input type="checkbox" name="checkbox-3" id="checkbox-3-3" value="3" class="coop-form__field coop-form__checkbox">
      <label for="checkbox-3-3" class="coop-form__label">foreign property</label>
    </div>

    <div class="coop-form__choice">
      <input type="checkbox" name="checkbox-3" id="checkbox-3-4" value="4" class="coop-form__field coop-form__checkbox">
      <label for="checkbox-3-4" class="coop-form__label">trademarks or patents</label>
    </div>
  </fieldset>
</form>

                                
<!-- Checkboxes with hint and error message -->
<form id="checkboxes-hint-error" class="coop-form" novalidate>
  <h3>Checkboxes with hint and error message</h3>

  <fieldset id="checkbox-4" class="coop-form__row" aria-describedby="checkbox-4-hint checkbox-4-error">
    <legend class="coop-form__label">Do you own:</legend>

    <p id="checkbox-4-hint" class="coop-form__hint">Select all that apply</p>
    <p id="checkbox-4-error" class="coop-form__error">Select options owned by you</p>

    <div class="coop-form__choice">
      <input type="checkbox" name="checkbox-4" id="checkbox-4-1" value="1" class="coop-form__field coop-form__checkbox">
      <label for="checkbox-4-1" class="coop-form__label">a business</label>
    </div>

    <div class="coop-form__choice">
      <input type="checkbox" name="checkbox-4" id="checkbox-4-2" value="2" class="coop-form__field coop-form__checkbox">
      <label for="checkbox-4-2" class="coop-form__label">agricultural property</label>
    </div>

    <div class="coop-form__choice">
      <input type="checkbox" name="checkbox-4" id="checkbox-4-3" value="3" class="coop-form__field coop-form__checkbox">
      <label for="checkbox-4-3" class="coop-form__label">foreign property</label>
    </div>

    <div class="coop-form__choice">
      <input type="checkbox" name="checkbox-4" id="checkbox-4-4" value="4" class="coop-form__field coop-form__checkbox">
      <label for="checkbox-4-4" class="coop-form__label">trademarks or patents</label>
    </div>
  </fieldset>
</form>

                                
<!-- Checkboxes single -->
<form id="checkboxes-single" class="coop-form" novalidate>
  <h3>Single checkbox</h3>

  <div class="coop-form__row">
    <p id="checkbox-5-error" class="coop-form__error" hidden></p>
    <div class="coop-form__choice">
      <input type="checkbox" name="checkbox-5" id="checkbox-5-1" value="1" class="coop-form__field coop-form__checkbox">
      <label for="checkbox-5-1" class="coop-form__label">I agree to the terms and conditions</label>
    </div>
  </div>
</form>

                                
<!-- Single checkbox with hint -->
<form id="checkboxes-single-hint" class="coop-form" novalidate>
  <h3>Single checkbox with hint</h3>

  <div class="coop-form__row">
    <p id="checkbox-6-error" class="coop-form__error" hidden></p>
    <div class="coop-form__choice">
      <input type="checkbox" name="checkbox-6" id="checkbox-6-1" value="1" class="coop-form__field coop-form__checkbox" aria-describedby="checkbox-6-hint">
      <label for="checkbox-6-1" class="coop-form__label">I agree to the terms and conditions</label>
      <p id="checkbox-6-hint" class="coop-form__hint">Descriptive hint goes here</p>
    </div>
  </div>
</form>

                                
<!-- Single checkbox with error message -->
<form id="checkboxes-single-error" class="coop-form" novalidate>
  <h3>Single checkbox with error message</h3>

  <div class="coop-form__row">
    <p id="checkbox-7-error" class="coop-form__error">Please accept the terms and conditions</p>
    <div class="coop-form__choice">
      <input type="checkbox" name="checkbox-7" id="checkbox-7-1" value="1" class="coop-form__field coop-form__checkbox" aria-describedby="checkbox-7-error">
      <label for="checkbox-7-1" class="coop-form__label">I agree to the terms and conditions</label>
    </div>
  </div>
</form>

                                
<!-- Single checkbox with hint and error message -->
<form id="checkboxes-single-hint-error" class="coop-form" novalidate>
  <h3>Single checkbox with hint and error message</h3>

  <div class="coop-form__row">
    <p id="checkbox-8-error" class="coop-form__error">Please accept the terms and conditions</p>
    <div class="coop-form__choice">
      <input type="checkbox" name="checkbox-8" id="checkbox-8-1" value="1" class="coop-form__field coop-form__checkbox" aria-describedby="checkbox-8-hint checkbox-8-error">
      <label for="checkbox-8-1" class="coop-form__label">I agree to the terms and conditions</label>
      <p id="checkbox-8-hint" class="coop-form__hint">Descriptive hint goes here</p>
    </div>
  </div>
</form>

                                
<!-- Radios -->
<form id="radios" class="coop-form" novalidate>
  <h3>Radios</h3>

  <fieldset id="radio-1" class="coop-form__row">
    <legend class="coop-form__label">Type of delivery</legend>

    <p id="radio-1-error" class="coop-form__error" hidden></p>

    <div class="coop-form__choice">
      <input type="radio" name="radio-1" id="radio-1-1" value="1" class="coop-form__field coop-form__radio">
      <label class="coop-form__label" for="radio-1-1">Free delivery</label>
    </div>

    <div class="coop-form__choice">
      <input type="radio" name="radio-1" id="radio-1-2" value="2" class="coop-form__field coop-form__radio">
      <label class="coop-form__label" for="radio-1-2">Next day delivery — £4.99</label>
    </div>
  </fieldset>
</form>

                                
<!-- Radios with hint -->
<form id="radios-hint" class="coop-form" novalidate>
  <h3>Radios with hint</h3>

  <fieldset id="radio-2" class="coop-form__row" aria-describedby="radio-2-hint">
    <legend class="coop-form__label">Type of delivery</legend>

    <p id="radio-2-hint" class="coop-form__hint">Select only one option</p>
    <p id="radio-2-error" class="coop-form__error" hidden></p>

    <div class="coop-form__choice">
      <input type="radio" name="radio-2" id="radio-2-1" value="1" class="coop-form__field coop-form__radio">
      <label class="coop-form__label" for="radio-2-1">Free delivery</label>
    </div>

    <div class="coop-form__choice">
      <input type="radio" name="radio-2" id="radio-2-2" value="2" class="coop-form__field coop-form__radio">
      <label class="coop-form__label" for="radio-2-2">Next day delivery — £4.99</label>
    </div>
  </fieldset>
</form>

                                
<!-- Radios with error message -->
<form id="radios-error" class="coop-form" novalidate>
  <h3>Radios with error message</h3>

  <fieldset id="radio-3" class="coop-form__row" aria-describedby="radio-3-error">
    <legend class="coop-form__label">Type of delivery</legend>

    <p id="radio-3-error" class="coop-form__error">Select type of delivery</p>

    <div class="coop-form__choice">
      <input type="radio" name="radio-3" id="radio-3-1" value="1" class="coop-form__field coop-form__radio">
      <label class="coop-form__label" for="radio-3-1">Free delivery</label>
    </div>

    <div class="coop-form__choice">
      <input type="radio" name="radio-3" id="radio-3-2" value="2" class="coop-form__field coop-form__radio">
      <label class="coop-form__label" for="radio-3-2">Next day delivery — £4.99</label>
    </div>
  </fieldset>
</form>

                                
<!-- Radios with hint and error message -->
<form id="radios-hint-error" class="coop-form" novalidate>
  <h3>Radios with hint and error message</h3>

  <fieldset id="radio-4" class="coop-form__row" aria-describedby="radio-4-hint radio-4-error">
    <legend class="coop-form__label">Type of delivery</legend>

    <p id="radio-4-hint" class="coop-form__hint">Select only one option</p>
    <p id="radio-4-error" class="coop-form__error">Select type of delivery</p>

    <div class="coop-form__choice">
      <input type="radio" name="radio-4" id="radio-4-1" value="1" class="coop-form__field coop-form__radio">
      <label class="coop-form__label" for="radio-4-1">Free delivery</label>
    </div>

    <div class="coop-form__choice">
      <input type="radio" name="radio-4" id="radio-4-2" value="2" class="coop-form__field coop-form__radio">
      <label class="coop-form__label" for="radio-4-2">Next day delivery — £4.99</label>
    </div>
  </fieldset>
</form>

                                

Design and content

If you’re using either radio buttons or checkboxes:

  • style them in a way that makes it clear which option or options has been selected
  • allow users to click anywhere in the box
  • display the options a user can choose from top to bottom, not left to right — this makes it quicker for users to scan
  • Where possible, give users the option to indicate that none of the options apply to them. Some users need this to be an explicit option to know that they can move on.