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

Working example

• Examples: Checkboxes and radio buttons

How to implement

• Add the gc-chckbxrdio class to the fieldset or the container element surrounding the checkbox/radio-button inputs.
• For smaller checkboxes (tickboxes), the class gc-chckbxrdio has to be enabled on the container element surrounding the targeted checkbox with the class checkbox.
• To toggle a disabled state, add a disabled attribute to the input field.
• For inline form, add the form-inline class to surrounding container of the checkboxes or radio buttons. Also add the label-inline class to each checkbox or radio button container.

Evaluation and report

There is no evaluation and report available for this component.

API (Version 1.0.1)

CSS Class (v1.0)

gc-chckbxrdio

Component: Checkboxes and radio buttons

Template (v1.0)

Notes:

• Can only be used with explicit labels. If you need to use implicit label, refer to WET-BOEW regular pattern for checkboxes and radio buttons.

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.1)

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.