Language selection

Government of Canada / Gouvernement du Canada

Search

Checkboxes and radio buttons - Beta - Canada.ca design pattern

From: Treasury Board of Canada Secretariat

Checkboxes and radio buttons are form controls. They help people select an answer to a question or confirm completion.

Large checkboxes and radio buttons are easier to select and use, particularly on mobile devices.

  • Beta
  • Version: 0.1
  • Updated: October 21, 2020

On this page

When to use

Checkboxes and radio buttons should be used in interactive questions, like in application forms or wizards:

What to avoid

Don't use checkboxes or radio buttons to present options that are not easily comparable. In these cases, use the Services and information (doormat) pattern:

For a stand alone question with few options and a manageable amount of content per option that does not require separate pages, use expand/collapse or tabs instead:

How to implement

Large checkboxes

When to use: Large checkboxes are the recommended checkbox pattern. In particular, large checkboxes should be used when one or more selections can be made to answer a question.

What to avoid: Don't use the large checkboxes when building a checklist with items that break across multiple lines or when only a single item can be checked. For these situations, use tickboxes instead.

Large checkboxes target with explicit labels

Choose your condiments:
Code
HTML 
<fieldset class="provisional gc-chckbxrdio">
	<legend>Choose your condiments:</legend>
	<ul class="list-unstyled lst-spcd-2">
		<li class="checkbox">
			<input type="checkbox" id="cond1">
			<label for="cond1">Ketchup</label>
		</li>
		<li class="checkbox">
			<input type="checkbox" id="cond2">
			<label for="cond2">Relish</label>
		</li>
		<li class="checkbox">
			<input type="checkbox" id="cond3">
			<label for="cond3">Mustard</label>
		</li>
	</ul>
</fieldset>
CSS 
.provisional.gc-chckbxrdio label {
	cursor: pointer;
	display: block;
	font-size: 20px;
}
.provisional.gc-chckbxrdio legend {
	float: none;
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 15px;
	margin-top: 0;
}
.provisional.gc-chckbxrdio input[type="checkbox"] {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.provisional.gc-chckbxrdio input[type="checkbox"][disabled] + label {
	cursor: not-allowed;
	opacity: .5;
}
.provisional.gc-chckbxrdio input[type="checkbox"] + label {
	display: inline-block;
	line-height: 2;
	margin-left: 36px;
	width: auto;
}
.provisional.gc-chckbxrdio input[type="checkbox"] + label::before {
	border: 4px solid #fff;
	-webkit-box-shadow: 0 0 0 2px #000;
	box-shadow: 0 0 0 2px #000;
	content: "";
	display: inline-block;
	height: 36px;
	left: 0;
	position: absolute;
	top: 2px;
	width: 36px;
}
.provisional.gc-chckbxrdio input[type="checkbox"] + label:hover::before {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#e6e5e5), color-stop(50%, white));
	background-image: linear-gradient(to bottom, #e6e5e5, white 50%);
}
.provisional.gc-chckbxrdio input[type="checkbox"]:focus + label::before {
	-webkit-box-shadow: 0 0 0 2px #000, 0 0 8px 4px #3b99fc;
	box-shadow: 0 0 0 2px #000, 0 0 8px 4px #3b99fc;
}
.provisional.gc-chckbxrdio input[type="checkbox"]:checked + label::after {
	border-color: #333;
	border-style: solid;
	border-width: 0 5px 5px 0;
	content: "";
	display: inline-block;
	height: 26px;
	left: 12px;
	position: absolute;
	top: 4px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	width: 13px;
}

Large disabled checkboxes target with explicit labels

Choose your condiments:
Code
HTML 
<fieldset class="provisional gc-chckbxrdio">
	<legend>Choose your condiments:;</legend>
	<ul class="list-unstyled lst-spcd-2">
		<li class="checkbox">
			<input type="checkbox" id="cond4" disabled>
			<label for="cond1">Ketchup</label>
		</li>
		<li class="checkbox">
			<input type="checkbox" id="cond5">
			<label for="cond2">Relish</label>
		</li>
		<li class="checkbox">
			<input type="checkbox" id="cond6" disabled>
			<label for="cond3">Mustard</label>
		</li>
	</ul>
</fieldset>
CSS 
.provisional.gc-chckbxrdio label {
	cursor: pointer;
	display: block;
	font-size: 20px;
}
.provisional.gc-chckbxrdio legend {
	float: none;
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 15px;
	margin-top: 0;
}
.provisional.gc-chckbxrdio input[type="checkbox"] {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.provisional.gc-chckbxrdio input[type="checkbox"][disabled] + label {
	cursor: not-allowed;
	opacity: .5;
}
.provisional.gc-chckbxrdio input[type="checkbox"] + label {
	display: inline-block;
	line-height: 2;
	margin-left: 36px;
	width: auto;
}
.provisional.gc-chckbxrdio input[type="checkbox"] + label::before {
	border: 4px solid #fff;
	-webkit-box-shadow: 0 0 0 2px #000;
	box-shadow: 0 0 0 2px #000;
	content: "";
	display: inline-block;
	height: 36px;
	left: 0;
	position: absolute;
	top: 2px;
	width: 36px;
}
.provisional.gc-chckbxrdio input[type="checkbox"] + label:hover::before {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#e6e5e5), color-stop(50%, white));
	background-image: linear-gradient(to bottom, #e6e5e5, white 50%);
}
.provisional.gc-chckbxrdio input[type="checkbox"]:focus + label::before {
	-webkit-box-shadow: 0 0 0 2px #000, 0 0 8px 4px #3b99fc;
	box-shadow: 0 0 0 2px #000, 0 0 8px 4px #3b99fc;
}
.provisional.gc-chckbxrdio input[type="checkbox"]:checked + label::after {
	border-color: #333;
	border-style: solid;
	border-width: 0 5px 5px 0;
	content: "";
	display: inline-block;
	height: 26px;
	left: 12px;
	position: absolute;
	top: 4px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	width: 13px;
}

Tickboxes (smaller checkboxes)

When to use: Only use tickboxes when there is a single item that can be checked, such as for confirmations.

What to avoid: Don't use tickboxes for answers to questions or in checklists. For these situations, use the large checkboxes instead:

Consider using a button instead of tickbox, particularly in cases where it is the primary action or next step on the page:

Single smaller checkbox target with explicit label in an inline form

Code
HTML 
<form class="form-inline" method="get" action="#">
	<div class="form-group">
		<label class="wb-inv" for="exampleInputEmail2">Email address</label>
		<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email" />
	</div>
	<div class="form-group">
		<label class="wb-inv" for="exampleInputPassword2">Password</label>
		<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" />
	</div>
	<div class="checkbox provisional gc-chckbxrdio">
		<input id="remember2" type="checkbox" />
		<label for="remember2">Remember me</label>
	</div>
	<button type="submit" class="btn btn-default">Sign in</button>
</form>
CSS 
.provisional.gc-chckbxrdio label {
	cursor: pointer;
	display: block;
	font-size: 20px;
}
.provisional.gc-chckbxrdio legend {
	float: none;
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 15px;
	margin-top: 0;
}
.provisional.gc-chckbxrdio input[type="checkbox"] {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.provisional.gc-chckbxrdio input[type="checkbox"][disabled] + label {
	cursor: not-allowed;
	opacity: .5;
}
.provisional.gc-chckbxrdio input[type="checkbox"] + label {
	display: inline-block;
	line-height: 2;
	margin-left: 36px;
	width: auto;
}
.provisional.gc-chckbxrdio input[type="checkbox"] + label::before {
	border: 4px solid #fff;
	-webkit-box-shadow: 0 0 0 2px #000;
	box-shadow: 0 0 0 2px #000;
	content: "";
	display: inline-block;
	height: 36px;
	left: 0;
	position: absolute;
	top: 2px;
	width: 36px;
}
.provisional.gc-chckbxrdio input[type="checkbox"] + label:hover::before {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#e6e5e5), color-stop(50%, white));
	background-image: linear-gradient(to bottom, #e6e5e5, white 50%);
}
.provisional.gc-chckbxrdio input[type="checkbox"]:focus + label::before {
	-webkit-box-shadow: 0 0 0 2px #000, 0 0 8px 4px #3b99fc;
	box-shadow: 0 0 0 2px #000, 0 0 8px 4px #3b99fc;
}
.provisional.gc-chckbxrdio.checkbox input[type="checkbox"] + label,
.provisional.gc-chckbxrdio.checkbox input[type="checkbox"] + label + ul {
	font-size: 17px;
	min-height: 23px;
}
.provisional.gc-chckbxrdio.checkbox input[type="checkbox"] + label::before {
	height: 24px;
	left: 6px;
	top: 4px;
	width: 24px;
}
.provisional.gc-chckbxrdio.checkbox input[type="checkbox"]:checked + label::after {
	border-width: 0 3px 3px 0;
	height: 16px;
	left: 14px;
	top: 6px;
	width: 9px;
}
.provisional.gc-chckbxrdio input[type="checkbox"]:checked + label::after {
	border-color: #333;
	border-style: solid;
	border-width: 0 5px 5px 0;
	content: "";
	display: inline-block;
	height: 26px;
	left: 12px;
	position: absolute;
	top: 4px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	width: 13px;
}

Radio buttons

Large radio buttons target with explicit labels

When to use: Use radio buttons when only one selection can be made in a list.

Which is your favorite pet?
Code
HTML 
<fieldset class="provisional gc-chckbxrdio">
	<legend>Which is your favorite pet?</legend>
	<ul class="list-unstyled lst-spcd-2">
		<li class="radio">
			<input type="radio" name="animal" id="animal-1">
			<label for="animal-1">Dog</label>
		</li>
		<li class="radio">
			<input type="radio" name="animal" id="animal-2">
			<label for="animal-2">Cat</label>
		</li>
		<li class="radio">
			<input type="radio" name="animal" id="animal-3">
			<label for="animal-3">Rat</label>
		</li>
	</ul>
</fieldset>
CSS 
.provisional.gc-chckbxrdio label {
	cursor: pointer;
	display: block;
	font-size: 20px;
}
.provisional.gc-chckbxrdio legend {
	float: none;
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 15px;
	margin-top: 0;
}
.provisional.gc-chckbxrdio input[type="radio"] {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.provisional.gc-chckbxrdio input[type="radio"][disabled] + label {
	cursor: not-allowed;
	opacity: .5;
}
.provisional.gc-chckbxrdio input[type="radio"] + label {
	display: inline-block;
	line-height: 2;
	margin-left: 36px;
	width: auto;
}
.provisional.gc-chckbxrdio input[type="radio"] + label::before {
	border: 4px solid #fff;
	-webkit-box-shadow: 0 0 0 2px #000;
	box-shadow: 0 0 0 2px #000;
	content: "";
	display: inline-block;
	height: 36px;
	left: 0;
	position: absolute;
	top: 2px;
	width: 36px;
}
.provisional.gc-chckbxrdio input[type="radio"] + label:hover::before {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#e6e5e5), color-stop(50%, white));
	background-image: linear-gradient(to bottom, #e6e5e5, white 50%);
}
.provisional.gc-chckbxrdio input[type="radio"]:focus + label::before {
	-webkit-box-shadow: 0 0 0 2px #000, 0 0 8px 4px #3b99fc;
	box-shadow: 0 0 0 2px #000, 0 0 8px 4px #3b99fc;
}
.provisional.gc-chckbxrdio input[type="radio"] + label::before {
	border-radius: 50%;
}
.provisional.gc-chckbxrdio input[type="radio"]:checked + label::before {
	background: #444;
}

Large radio buttons target with explicit labels in an inline form

Choose an option:
Code
HTML 
<fieldset class="provisional gc-chckbxrdio form-inline">
	<legend>Choose an option</legend>
	<div class="label-inline">
		<input id="inlineRadio1" type="radio" name="optradio">
		<label for="inlineRadio1">Option 1</label>
	</div>
	<div class="label-inline">
		<input id="inlineRadio2" type="radio" name="optradio">
		<label for="inlineRadio2">Option 2</label>
	</div>
	<div class="label-inline">
		<input id="inlineRadio3" type="radio" name="optradio">
		<label for="inlineRadio3">Option 3</label>
	</div>
</fieldset>
CSS 
.provisional.gc-chckbxrdio label {
	cursor: pointer;
	display: block;
	font-size: 20px;
}
.provisional.gc-chckbxrdio legend {
	float: none;
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 15px;
	margin-top: 0;
}
.provisional.gc-chckbxrdio input[type="radio"] {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.provisional.gc-chckbxrdio input[type="radio"][disabled] + label {
	cursor: not-allowed;
	opacity: .5;
}
.provisional.gc-chckbxrdio input[type="radio"] + label {
	display: inline-block;
	line-height: 2;
	margin-left: 36px;
	width: auto;
}
.provisional.gc-chckbxrdio input[type="radio"] + label::before {
	border: 4px solid #fff;
	-webkit-box-shadow: 0 0 0 2px #000;
	box-shadow: 0 0 0 2px #000;
	content: "";
	display: inline-block;
	height: 36px;
	left: 0;
	position: absolute;
	top: 2px;
	width: 36px;
}
.provisional.gc-chckbxrdio input[type="radio"] + label:hover::before {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#e6e5e5), color-stop(50%, white));
	background-image: linear-gradient(to bottom, #e6e5e5, white 50%);
}
.provisional.gc-chckbxrdio input[type="radio"]:focus + label::before {
	-webkit-box-shadow: 0 0 0 2px #000, 0 0 8px 4px #3b99fc;
	box-shadow: 0 0 0 2px #000, 0 0 8px 4px #3b99fc;
}
.provisional.gc-chckbxrdio input[type="radio"] + label::before {
	border-radius: 50%;
}
.provisional.gc-chckbxrdio input[type="radio"]:checked + label::before {
	background: #444;
}
.provisional.gc-chckbxrdio.form-inline .label-inline {
	padding-right: 20px;
}
.provisional.gc-chckbxrdio.form-inline .label-inline label {
	padding-left: 10px;
}

Configuration options

Option Description How to configure
Large input targets Design for large checkbox and radio buttons. Add the gc-chckbxrdio class to the fieldset or the container element surrounding the checkbox/radio-button inputs.
Tickboxes Small checkboxes when there is a single item that can be checked, such as for confirmations. The class gc-chckbxrdio and the class checkbox have to be enabled on the container element surrounding the targeted checkbox.
Disabled state Disabled inputs will not be clickable. Visual indications include greying out the control and adding a "stop" cursor icon on hover. To toggle a disabled state, add a disabled attribute to the input field
Inline format Inline radio buttons or checkboxes will display side by side on larger screens and wrap to new lines, rather than vertically. 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.

Latest changes

Version 0.1:
Launched the beta version of the checkboxes and radio buttons pattern.

Discussion

Discuss the pattern in github issues

Report a problem on this page
Date modified: