Checkbox

It's my tick in a box, tick in a box


Remember, when working with forms, add the aria-describedby attribute, and some helpful text, to allow a seamless experience for everybody.

Keep your form on a white background to enable full contrast ratios for form validation messages.

How we design them

  • Checkbox components need to be a child of a form

Designed for inclusion

  • We always associate the checkbox with its label by wrapping it inside its label. This means that users of screen readers receive context around the checkbox. It also means that the label becomes clickable, increasing the tap-target of the checkbox
  • When focussed on, the checkbox will give us our nice, clear blue focus style
  • If a user has selected the reduce motion option in their browser settings, the animation will not run

How they look

View demo Open in new window
320 x 568
View code
    <form>
  <label class="gg-c-checkbox">
    <input type="checkbox" id="checkbox1" class="gg-c-checkbox__checkbox" name="/" />
    <span class="gg-c-checkbox__pseudo-checkbox"></span>
    <span class="gg-c-checkbox__text">Checkbox information text. This is clickable too</span>
    <svg xmlns="http://www.w3.org/2000/svg" width="56" height="51" class="gg-c-checkbox__shine">
      <g fill-rule="evenodd">
        <rect width="8" height="2" x="48" y="24" rx="2" />
        <rect width="8" height="2" x="11.73" y="2.46" rx="2" transform="rotate(60 15.73 4.46)"/>
        <rect width="8" height="2" x="35.73" y="2.46" rx="2" transform="rotate(120 39.73 4.46)"/>
        <rect width="8" height="2" x="12" y="45" rx="2" transform="scale(1 -1) rotate(60 97.4 0)"/>
        <rect width="8" height="2" x="36" y="45" rx="2" transform="scale(-1 1) rotate(-60 0 116.28)"/>
        <rect width="8" height="2" y="24" rx="2" />
      </g>
    </svg>
  </label>
</form>