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

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>
    Checkbox information text. This is clickable too
    <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>