Back to the pattern library

Checkboxes

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

More detailed information on how to use form patterns can be found in our design guidance.

Example

Example

HTML

<fieldset class="coop-fieldset coop-c-checkbox-radio coop-u-margin-bb">
    <legend class="coop-legend">Do you own:</legend>
    <label class="coop-c-checkbox-radio__label">
        <input type="checkbox" value="1" name="client[owns_a_business]" class="coop-c-checkbox-radio__input">a business
    </label>
    <label class="coop-c-checkbox-radio__label">
        <input type="checkbox" value="2" name="client[owns_agricultural_property]" class="coop-c-checkbox-radio__input">agricultural property
    </label>
    <label class="coop-c-checkbox-radio__label">
        <input type="checkbox" value="3" name="client[owns_foreign_property]" class="coop-c-checkbox-radio__input">foreign property
    </label>
    <label class="coop-c-checkbox-radio__label">
        <input type="checkbox" value="4" name="client[owns_trademarks_or_patents]" class="coop-c-checkbox-radio__input">trademarks or patents
    </label>
</fieldset>

<fieldset class="coop-fieldset coop-c-checkbox-radio">
    <legend class="coop-legend">Type of delivery</legend>
    <label class="coop-c-checkbox-radio__label" for="shipping-free">
        <input type="radio" value="shipping-free" name="shipping" id="shipping-free" class="coop-c-checkbox-radio__input">Free delivery
    </label>
    <label class="coop-c-checkbox-radio__label" for="shipping-next-day">
        <input type="radio" value="shipping-next-day" name="shipping" id="shipping-next-day" class="coop-c-checkbox-radio__input">Next day delivery &mdash; &pound;4.99
    </label>
</fieldset>

<script>
</script>

SCSS

To use this component in your service add this import in your main SCSS file:

@import 'node_modules/@coopdigital/coop-frontend-components/forms/checkboxes-radios/_checkboxes-radios.scss';

Customise this component by following the guide here.

JS

'node_modules/@coopdigital/coop-frontend-components/forms/checkboxes-radios/_checkboxes-radios.js';

Design and content

Checkboxes have:

  • a background of #F3F3F3
  • rounded corners of 5px
  • padding of top and bottom of 18px and left and right of 60px
  • a font size of 20px Avenir regular in #282828
  • a bottom margin of 16px
  • a border 2px #6E6E6E when hovered
  • a border 2px #00B1E7 when selected
  • a background of #FFFFFF when selected

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.

Accessibility

We are currently working on this.

For more information see our general guide on accessibility.

Suggest a pattern

Use this form to suggest a new pattern or a change to an existing one.

Suggest a new pattern or a change