Checkboxes

Use checkboxes when you want the user to select one or more options from a list.

  • Content:
    @use 'sass:math';
    @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
    @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
    @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
    @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
    @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/line-heights.variables' as lineheight;
    @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/z-index.variables' as zIndex;
    
    $icon-dir: '../icons' !default;
    
    $ontario-touch-target-size: 36px;
    $ontario-touch-target-size-mobile: 40px;
    $ontario-checkboxes-size: 28px;
    $ontario-checkboxes-size-mobile: 32px;
    $ontario-checkbox-border-size: 2px;
    
    .ontario-checkboxes {
    	margin-bottom: spacing.$spacing-7;
    	max-width: globalVariables.$standard-width;
    }
    
    .ontario-checkboxes__item {
    	position: relative;
    	margin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4;
    	padding: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-6;
    	min-height: $ontario-checkboxes-size;
    	box-sizing: content-box;
    	&:last-of-type {
    		margin: spacing.$spacing-0;
    	}
    	@media screen and (max-width: breakpoints.$small-breakpoint) {
    		padding: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-7;
    		min-height: $ontario-checkboxes-size-mobile;
    	}
    }
    
    .ontario-checkboxes__input {
    	cursor: pointer;
    	margin: spacing.$spacing-0;
    	position: absolute;
    	top: -$ontario-checkbox-border-size;
    	left: -$ontario-checkbox-border-size;
    	opacity: 0;
    	width: $ontario-touch-target-size;
    	height: $ontario-touch-target-size;
    	z-index: zIndex.$ontario-z-index-above-low;
    
    	// prevent blue default highlighting of input on android
    	-webkit-tap-highlight-color: transparent;
    
    	@media screen and (max-width: breakpoints.$small-breakpoint) {
    		width: $ontario-touch-target-size-mobile;
    		height: $ontario-touch-target-size-mobile;
    	}
    }
    
    .ontario-checkboxes__label {
    	display: inline-block;
    	cursor: pointer;
    	line-height: lineheight.$ontario-line-height-7;
    	margin: spacing.$spacing-1 spacing.$spacing-0;
    	padding: spacing.$spacing-0 spacing.$spacing-4;
    	width: auto;
    	white-space: normal;
    
    	@media screen and (max-width: breakpoints.$small-breakpoint) {
    		margin: 0.33rem spacing.$spacing-0;
    	}
    
    	// [ ] Check box styles
    	&:before {
    		content: '';
    		border: $ontario-checkbox-border-size solid colours.$ontario-colour-black;
    		border-radius: globalVariables.$global-radius;
    		position: absolute;
    		top: 0;
    		left: 0;
    		width: $ontario-checkboxes-size-mobile;
    		height: $ontario-checkboxes-size-mobile;
    		transition: border 0.1s ease-in-out;
    		display: block;
    
    		@media screen and (min-width: breakpoints.$small-breakpoint) {
    			width: $ontario-checkboxes-size;
    			height: $ontario-checkboxes-size;
    		}
    	}
    
    	// ✔✔✔ Check mark styles ✔✔✔
    	&:after {
    		content: '';
    		background-image: url('#{$icon-dir}/ontario-checkbox-background-no-width.svg');
    		background-repeat: no-repeat;
    		height: $ontario-checkboxes-size + $ontario-checkbox-border-size;
    		width: $ontario-checkboxes-size + $ontario-checkbox-border-size;
    		position: absolute;
    		top: math.div($ontario-checkbox-border-size, 2);
    		left: math.div($ontario-checkbox-border-size, 2);
    		right: 0;
    		bottom: 0;
    		opacity: 0;
    		display: block;
    		@media screen and (max-width: breakpoints.$small-breakpoint) {
    			height: $ontario-checkboxes-size-mobile + $ontario-checkbox-border-size;
    			width: $ontario-checkboxes-size-mobile + $ontario-checkbox-border-size;
    		}
    	}
    }
    
    .ontario-checkboxes__input:focus + .ontario-checkboxes__label:before {
    	-moz-box-shadow: 0 0 0 4px colours.$ontario-colour-focus;
    	-webkit-box-shadow: 0 0 0 4px colours.$ontario-colour-focus;
    	box-shadow: 0 0 0 4px colours.$ontario-colour-focus;
    	outline: 4px solid transparent;
    	transition: all 0.1s ease-in-out;
    }
    
    .ontario-checkboxes__input:checked + .ontario-checkboxes__label:after {
    	opacity: 1;
    }
    
    .ontario-checkboxes__input:checked + .ontario-checkboxes__label:before {
    	background-color: colours.$ontario-colour-black;
    }
    
  • URL: /components/raw/checkboxes/checkboxes.scss
  • Filesystem Path: fractal/components/components/form/checkboxes/checkboxes.scss
  • Size: 4.3 KB
  • Content:
    .ontario-checkboxes{margin-bottom:2.5rem;max-width:48rem}.ontario-checkboxes__item{position:relative;margin:0 0 1rem;padding:0 0 0 2rem;min-height:28px;box-sizing:content-box}.ontario-checkboxes__item:last-of-type{margin:0}@media screen and (max-width: 40em){.ontario-checkboxes__item{padding:0 0 0 2.5rem;min-height:32px}}.ontario-checkboxes__input{cursor:pointer;margin:0;position:absolute;top:-2px;left:-2px;opacity:0;width:36px;height:36px;z-index:1;-webkit-tap-highlight-color:transparent}@media screen and (max-width: 40em){.ontario-checkboxes__input{width:40px;height:40px}}.ontario-checkboxes__label{display:inline-block;cursor:pointer;line-height:1.5;margin:.25rem 0;padding:0 1rem;width:auto;white-space:normal}@media screen and (max-width: 40em){.ontario-checkboxes__label{margin:.33rem 0}}.ontario-checkboxes__label:before{content:"";border:2px solid #1a1a1a;border-radius:4px;position:absolute;top:0;left:0;width:32px;height:32px;transition:border .1s ease-in-out;display:block}@media screen and (min-width: 40em){.ontario-checkboxes__label:before{width:28px;height:28px}}.ontario-checkboxes__label:after{content:"";background-image:url("../icons/ontario-checkbox-background-no-width.svg");background-repeat:no-repeat;height:30px;width:30px;position:absolute;top:1px;left:1px;right:0;bottom:0;opacity:0;display:block}@media screen and (max-width: 40em){.ontario-checkboxes__label:after{height:34px;width:34px}}.ontario-checkboxes__input:focus+.ontario-checkboxes__label:before{box-shadow:0 0 0 4px #009adb;outline:4px solid transparent;transition:all .1s ease-in-out}.ontario-checkboxes__input:checked+.ontario-checkboxes__label:after{opacity:1}.ontario-checkboxes__input:checked+.ontario-checkboxes__label:before{background-color:#1a1a1a}
  • URL: /components/raw/checkboxes/checkboxes.css
  • Filesystem Path: fractal/components/components/form/checkboxes/checkboxes.css
  • Size: 1.8 KB

Guiding principle: Give the user control.

When to use this component

Use checkboxes when you want the user to:

  • select more than one option from a list
  • sign off or agree to something using a single checkbox

If you want the user to select only one option use a list with radio buttons.


Order of checkbox lists

Put checkbox lists in alphabetical order, with these exceptions:

  • list yes before no
  • if there is an option that you know about 90% or more of your users will choose, put that option first
    • for example, list Ontario first if users are choosing their province from a list
    • be careful not to bias the user’s choice or imply the importance of one option over another
  • put any “None of the above” or “I do not know” options last

Technical specifications

Example


Examples showing the associated labels for checkbox inputs.

Do:

  • always include an associated label with a matching ID next to each checkbox
  • position checkboxes to the left of their labels
  • left-align checkboxes
  • always make the label and the checkbox selectable
  • stack checkbox vertically
    • exception: yes/no can be listed horizontally

Do not:

  • change a checkbox’s default size (32 px by 32 px)
  • pre-select checkboxes (users might miss the question or submit the wrong answer)

If you have any questions or feedback, please get in touch.