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

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>