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

  • Content:
    @use "sass:math";
    @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-7;
        max-width: $standard-width;
    .ontario-checkboxes__item {
        position: relative;
        margin: 0 0 $spacing-4;
        padding: 0 0 0 $spacing-6;
        min-height: $ontario-checkboxes-size;
        box-sizing: content-box;
        &:last-of-type {
            margin: 0;
        @media screen and (max-width: $small-breakpoint) {
            padding: 0 0 0$spacing-7;
            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;
        width: auto;
        white-space: normal;
        @media screen and (max-width: $small-breakpoint) {
            margin: 0.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-mobile;
            height: $ontario-checkboxes-size-mobile;
            transition: border 0.1s ease-in-out;
            display: block;
            @media screen and (min-width: $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: $small-breakpoint) {
                height: $ontario-checkboxes-size-mobile +
                width: $ontario-checkboxes-size-mobile +
    .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/form/checkboxes/checkboxes.scss
  • Size: 3.5 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

Examples showing the associated labels for checkbox inputs.


  • 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)

Contact us

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