Cases à cocher

Utilisez les cases à cocher lorsque vous voulez que l’utilisateur sélectionne un ou plusieurs choix de la liste.

  • Contenu:
    @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 +
                    $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 $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
  • Chemin du système de fichiers: fractal/components/components/form/checkboxes/checkboxes.scss
  • Taille: 3.5 KB
  • Contenu:
    .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
  • Chemin du système de fichiers: fractal/components/components/form/checkboxes/checkboxes.css
  • Taille: 1.8 KB

Principe directeur : Donner le contrôle à l’utilisateur

Quand utiliser cette composante

Employez des cases à cocher lorsque vous voulez que l’utilisateur :

  • sélectionne plus d’une option dans une liste;
  • signe ou approuve quelque chose à l’aide d’une simple case à cocher.

Si vous voulez que l’utilisateur sélectionne une seule option, utilisez une liste pourvue de cases d’option.


Ordre des listes de cases à cocher

Mettez les listes de cases à cocher en ordre alphabétique, sauf pour ces exceptions :

  • inscrire oui avant non;
  • si vous savez qu’une proportion de 90 % ou plus de vos utilisateurs sélectionneront une option en particulier, placez‑la au sommet de la liste;
    • inscrivez par exemple « Ontario » au sommet de la liste si les utilisateurs sélectionnent leur province dans une liste;
    • prenez soin de ne pas influencer le choix de l’utilisateur ou d’insister sur l’importance d’une option par rapport à une autre;
  • placez les options « Aucune de ces réponses » ou « Je ne sais pas » à la fin de la liste.

Spécifications techniques

Question obligatoire demandant « Quel mode de communication devrions-nous utiliser avec vous »? Les options de la case à cocher sont le message texte, le courriel et l'appel téléphonique, avec une flèche pointant sur « message texte » pour l’indiquer comme une étiquette. L'option d'appel téléphonique est cochée.

À faire :

  • Toujours insérer une étiquette associée à un identifiant correspondant près de chaque case à cocher.
  • Placer les cases à cocher à gauche de leurs étiquettes.
  • Aligner à gauche les cases à cocher.
  • Toujours permettre la sélection de l’étiquette et de la case à cocher.
  • Empiler les cases à cocher à la verticale.
    • Exception : oui/non peuvent être placés à l’horizontale.

À ne pas faire:

  • Changer la taille par défaut d’une case à cocher (32 px par 32 px).
  • Présélectionner des cases à cocher (les utilisateurs pourraient rater la question ou soumettre la mauvaise réponse).

Pour nous joindre

Si vous avez des questions ou souhaitez donner de la rétroaction, veuillez communiquer avec nous.