Language selection

Search


Checkboxes and radio buttons

Status
Stable
Type
Canada.ca design pattern
Last review
2021-05-07
Guidance
Checkboxes and radio buttons: Canada.ca design system
Technical name
  • gc-chckbxrdio

Purpose

Display check boxes and radio buttons that are bigger than natively provided by browsers and in-line with the Canada.ca 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.

Usage

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)

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

Template (v1.0)

Notes:

Default: .gc-chckbxrdio

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

Variant: Tickbox (.checkbox.gc-chckbxrdio)

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

Visual rendering (v1.0)

Default

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.

Tickbox

Check box and radio
  • Width and height are exactly 24 pixels excluding borders.
Version notes
Version 1.0
  • Original rendering

Page details

Date modified: