Language selection


Checkboxes and radio buttons

Type design pattern
Last review
Checkboxes and radio buttons: design system
Technical name
  • gc-chckbxrdio


Display check boxes and radio buttons that are bigger than natively provided by browsers and in-line with the design system.

A long time issue with checkboxes and radio buttons has been that labels don't look clickable to most people

Even using designs that highlight the label text or put the input and label with a grey outline, studies showed that people still wanted to click the input design.


Use when

  • You want to display bigger check boxes and/or radio buttons than natively provided by browsers and you have read the design system recommendations;
  • Your inputs are explicit, in the sense that the labels are siblings to the inputs.

Do not use when

  • You have implicit check boxe and/or radio buttons, in the sense that inputs are nested inside labels;
  • Your scenario lands in the What to avoid section.

Working example

How to implement

Evaluation and report

There is no evaluation and report available for this component.

API (Version 1.0)

CSS Class Template Visual rendering Schema
Version 1.0 Version 1.0 Version 1.0 n.a.

CSS Class (v1.0)

Component: Checkboxes and radio buttons
Version notes
Version 1.0 (v8.0)
  • Created: .gc-chckbxrdio

Template (v1.0)


Default: .gc-chckbxrdio

<fieldset class="gc-chckbxrdio">
	<ul class="list-unstyled lst-spcd-2">
		<li class="checkbox">
			<input type="checkbox" id="template">
			<label for="template">Template</label>

Variant: Tickbox (.checkbox.gc-chckbxrdio)

<div class="checkbox gc-chckbxrdio">
	<input id="template" type="checkbox"/>
	<label for="template">Template</label>

Visual rendering (v1.0)


Check box and radio
  • Width and height are exactly 36 pixels excluding borders;
  • Borders are are quite thick (2 pixels) and their color is black (#000);
  • There is a 4 pixels white (#fff) gap between borders and the hovering area;
  • When hovered, light background gradient from top to bottom (#e6e5e5 to #fff on the Y-axis);
  • when keyboard focused, distinct blue halo (#3b99fc) around the input;
  • When disabled, opacity dim down to 50%, turning grey.
Check box only
  • When checked, Check mark is 5 pixels thick and touches the edges the hover aria perfectly.
Radio only
  • border radius of 50%, which make them round;
  • When checked, grey dot (#444) covers the entire hover aria.


Check box and radio
  • Width and height are exactly 24 pixels excluding borders.
Version notes
Version 1.0
  • Original rendering
Report a problem on this page
Please select all that apply:

Thank you for your help!

You will not receive a reply. For enquiries, please contact us.

Date modified: