Checkboxes and radio buttons - Beta - Canada.ca design pattern
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
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
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.
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
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
- Date modified: