Cases d’option

Utilisez les cases d’option lorsque vous voulez que l’utilisateur ne choisisse qu’une seule option dans une liste.

  • Contenu:
    @use "sass:math";
    @import "../../../../theme/assets/styles/sass/variables-import";
    
    $ontario-touch-target-size: 36px;
    $ontario-touch-target-size-mobile: 40px;
    $ontario-radios-size: 32px;
    $ontario-radios-size-mobile: 36px;
    $ontario-input-offset: math.div($ontario-touch-target-size - $ontario-radios-size, 2);
    
    * .ontario-radios {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        -moz-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    
    .ontario-radios {
        padding: 0 0 0 math.div($spacing-1, 2);
        margin-bottom: $spacing-7;
        max-width: $standard-width;
    }
    
    .ontario-radios__item {
        position: relative;
        display: block;
        margin: 0 0 $spacing-4;
        padding: 0 $spacing-6 0;
    }
    
    .ontario-radios__input {
        cursor: pointer;
        margin: 0;
        position: absolute;
        opacity: 0;
        top: $ontario-input-offset * -1;
        left: $ontario-input-offset * -1;
        width: $ontario-touch-target-size;
        height: $ontario-touch-target-size;
        z-index: 1;
    
        @media screen and (max-width: $small-breakpoint) {
            width: $ontario-touch-target-size-mobile;
            height: $ontario-touch-target-size-mobile;
            top: $ontario-input-offset * -0.75;
            left: $ontario-input-offset * -0.75;
        }
    }
    
    .ontario-radios__label {
        display: inline-block;
        font-size: 1rem;
        margin: 0.2rem 0;
        padding: 0 $spacing-3;
        // remove 300ms pause on mobile
        touch-action: manipulation;
        white-space: normal;
    
        @media screen and (max-width: $small-breakpoint) {
            margin: 0.3rem 0;
            padding: 0 1rem;
        }
    
        &:before {
            content: "";
            border: 2px solid $ontario-colour-black;
            border-radius: 50%;
            box-sizing: border-box;
            position: absolute;
            top: 0;
            left: 0;
            width: $ontario-radios-size;
            height: $ontario-radios-size;
            transition: border 0.1s ease-in-out;
    
            @media screen and (max-width: $small-breakpoint) {
                width: $ontario-radios-size-mobile;
                height: $ontario-radios-size-mobile;
            }
        }
    
        &:after {
            content: "";
            border-radius: 50%;
            border: 10px solid $ontario-colour-black;
            position: absolute;
            top: 0;
            left: 0;
            transform: translate(
                $ontario-input-offset * 3,
                $ontario-input-offset * 3
            );
            opacity: 0;
    
            @media screen and (max-width: $small-breakpoint) {
                border: 12px solid $ontario-colour-black;
            }
        }
    }
    
    .ontario-radios__input:focus + .ontario-radios__label:before {
        -moz-box-shadow: 0 0 0 4px $ontario-colour-focus;
        -webkit-box-shadow: $ontario-colour-focus;
        box-shadow: 0 0 0 4px $ontario-colour-focus;
        outline: 4px solid transparent;
        transition: box-shadow 0.1s ease-in-out;
    }
    
    .ontario-radios__input:checked + .ontario-radios__label:after {
        opacity: 1;
    }
    
  • URL: /components/raw/radio-buttons/radio-buttons.scss
  • Chemin du système de fichiers: fractal/components/components/form/radio-buttons/radio-buttons.scss
  • Taille: 2.9 KB
  • Contenu:
    * .ontario-radios{-webkit-tap-highlight-color:rgba(0,0,0,0);-moz-tap-highlight-color:rgba(0,0,0,0)}.ontario-radios{padding:0 0 0 .125rem;margin-bottom:2.5rem;max-width:48rem}.ontario-radios__item{position:relative;display:block;margin:0 0 1rem;padding:0 2rem 0}.ontario-radios__input{cursor:pointer;margin:0;position:absolute;opacity:0;top:-2px;left:-2px;width:36px;height:36px;z-index:1}@media screen and (max-width: 40em){.ontario-radios__input{width:40px;height:40px;top:-1.5px;left:-1.5px}}.ontario-radios__label{display:inline-block;font-size:1rem;margin:.2rem 0;padding:0 .75rem;touch-action:manipulation;white-space:normal}@media screen and (max-width: 40em){.ontario-radios__label{margin:.3rem 0;padding:0 1rem}}.ontario-radios__label:before{content:"";border:2px solid #1a1a1a;border-radius:50%;box-sizing:border-box;position:absolute;top:0;left:0;width:32px;height:32px;transition:border .1s ease-in-out}@media screen and (max-width: 40em){.ontario-radios__label:before{width:36px;height:36px}}.ontario-radios__label:after{content:"";border-radius:50%;border:10px solid #1a1a1a;position:absolute;top:0;left:0;transform:translate(6px, 6px);opacity:0}@media screen and (max-width: 40em){.ontario-radios__label:after{border:12px solid #1a1a1a}}.ontario-radios__input:focus+.ontario-radios__label:before{box-shadow:0 0 0 4px #009adb;outline:4px solid transparent;transition:box-shadow .1s ease-in-out}.ontario-radios__input:checked+.ontario-radios__label:after{opacity:1}
  • URL: /components/raw/radio-buttons/radio-buttons.css
  • Chemin du système de fichiers: fractal/components/components/form/radio-buttons/radio-buttons.css
  • Taille: 1.5 KB

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

Quand utiliser cette composante

Employez des cases d’option si vous voulez que l’utilisateur sélectionne une seule option dans une liste.

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


Ordre des listes de cases d’option

Mettez les listes de cases d’option 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 de la première 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

Choisir votre période de renouvellement (obligatoire). Deux cases à cocher avec les options Deux ans et Un an. Flèche pointant vers l'option Deux ans pour indiquer l’étiquette.

À faire :

  • Toujours insérer une étiquette associée à un identifiant correspondant près de chaque case d’option.
  • Placer les cases d’option à gauche de leurs étiquettes.
  • Aligner les cases d’option à gauche.
  • Toujours permettre la sélection de l’étiquette et de la case d’option.
  • Empiler les cases d’option à la verticale.
    • Exception : oui/non peuvent être placés à l’horizontale.
  • Insérer l’option « Aucune de ces réponses » ou « Je ne sais pas », si elle est valide, parce que les utilisateurs ne peuvent pas revenir en arrière pour ne pas sélectionner d’option une fois qu’ils en ont sélectionné une.

À ne pas faire :

  • Changer la taille par défaut d’une case d’option (32 px pour ordinateur et 36 px pour appareils mobiles, et une zone de touche de 48 px pour les deux).
  • Présélectionner des cases d’option (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.