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 demoView 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>