Checkboxes

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

  • Content:
    @import "../../../theme/assets/styles/sass/variables-import";
    
    $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-6;
        margin-bottom: $spacing-7;
    }
    
    .ontario-checkboxes__item {
        position: relative;
        margin: 0 0 $spacing-4;
        padding: 0 $spacing-6 0;
        min-height: $ontario-checkboxes-size;
    
        &:last-of-type {
            margin: 0;
        }
    
        @media screen and (max-width: $small-breakpoint) {
            padding: 0 $spacing-7 0;
            min-height: $ontario-checkboxes-size-mobile;
        }
    }
    
    .ontario-checkboxes__input {
        cursor: pointer;
        margin: 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: 1;
    
        // prevent blue default highlighting of input on android
        -webkit-tap-highlight-color: transparent;
    
        @media screen and (max-width: $small-breakpoint) {
            width: $ontario-touch-target-size-mobile;
            height: $ontario-touch-target-size-mobile;
        }
    }
    
    .ontario-checkboxes__label {
        display: inline-block;
        cursor: pointer;
        line-height: 1.5;
        margin: $spacing-1 0;
        padding: 0 $spacing-4;
    
        @media screen and (max-width: $small-breakpoint) {
            margin: .33rem 0;
        }
    
        // [ ] Check box styles
        &:before {
            content: "";
            border: $ontario-checkbox-border-size solid $ontario-colour-black;
            border-radius: $global-radius;
            position: absolute;
            top: 0;
            left: 0;
            width: $ontario-checkboxes-size;
            height: $ontario-checkboxes-size;
            transition: border 0.1s ease-in-out;
    
            @media screen and (max-width: $small-breakpoint) {
                width: $ontario-checkboxes-size-mobile;
                height: $ontario-checkboxes-size-mobile;
            }
        }
    
        // ✔✔✔ 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: $ontario-checkbox-border-size / 2;
            left: $ontario-checkbox-border-size / 2;
            right: 0;
            bottom: 0;
            opacity: 0;
    
    
            @media screen and (max-width: $small-breakpoint) {
                height: $ontario-checkboxes-size-mobile + $ontario-checkbox-border-size;
                width: $ontario-checkboxes-size-mobile + $ontario-checkbox-border-size;
            }
        }
    
    
        /*
            These styles specifically target IE11. There is a difference in the way the checkbox
            size is rendering, and this targets it to be the correct size
        */
        @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
            &:before {
                height: $ontario-checkboxes-size + ($ontario-checkbox-border-size * 2);
                width: $ontario-checkboxes-size + ($ontario-checkbox-border-size * 2);
    
                @media screen and (max-width: $small-breakpoint) {
                    height: $ontario-checkboxes-size-mobile + ($ontario-checkbox-border-size * 2);
                    width: $ontario-checkboxes-size-mobile + ($ontario-checkbox-border-size * 2);
                }
            }
        }
    }
    
    .ontario-checkboxes__input:focus+.ontario-checkboxes__label:before {
        -moz-box-shadow: 0 0 0 4px $ontario-colour-focus;
        -webkit-box-shadow: 0 0 0 4px $ontario-colour-focus;
        box-shadow: 0 0 0 4px $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: $ontario-colour-black;
    }
    
  • URL: /components/raw/checkboxes/checkboxes.scss
  • Filesystem Path: fractal/components/components/checkboxes/checkboxes.scss
  • Size: 4.1 KB
  • Content:
    .ontario-checkboxes{margin-bottom:2rem;margin-bottom:2.5rem}.ontario-checkboxes__item{position:relative;margin:0 0 1rem;padding:0 2rem 0;min-height:28px}.ontario-checkboxes__item:last-of-type{margin:0}@media screen and (max-width: 40em){.ontario-checkboxes__item{padding:0 2.5rem 0;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}@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:28px;height:28px;-webkit-transition:border .1s ease-in-out;transition:border .1s ease-in-out}@media screen and (max-width: 40em){.ontario-checkboxes__label:before{width:32px;height:32px}}.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}@media screen and (max-width: 40em){.ontario-checkboxes__label:after{height:34px;width:34px}}@media screen and (-ms-high-contrast: active),screen and (-ms-high-contrast: none){.ontario-checkboxes__label:before{height:32px;width:32px}}@media screen and (-ms-high-contrast: active)and (max-width: 40em),screen and (-ms-high-contrast: none)and (max-width: 40em){.ontario-checkboxes__label:before{height:36px;width:36px}}.ontario-checkboxes__input:focus+.ontario-checkboxes__label:before{box-shadow:0 0 0 4px #009adb;outline:4px solid transparent;-webkit-transition:all .1s ease-in-out;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/checkboxes/checkboxes.css
  • Size: 2.1 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

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)

Help improve this page

The design system team is considering making a smaller checkbox available – please let us know if there is a use case for it.

If you have other suggestions or advice or any questions on checkboxes, the design system team would love to hear from you.