Case à cocher

Cette section offre un aperçu des contextes d’utilisation, de l’anatomie du composant et des contenus. Pour plus d’informations sur la composition, le comportement et les interactions, consulter l’onglet « Spécifications ».

Variantes disponibles

Le composant offre deux variantes selon les contraintes d’espace de l’interface :

• Format par défaut
• Format compact

Le composant s’utilise principalement dans les formulaires lorsqu’il y a plus d’un choix de réponse  (généralement entre 2 et 12).

Il est préférable à la liste déroulante lorsque le nombre d’options est faible, car toutes les possibilités sont visibles d’un seul coup d’œil.

Voici les indications pour choisir le bon composant selon le nombre d’options à afficher, afin d’assurer une bonne lisibilité et une expérience utilisateur optimale :

• Pour 2 à 5-7 options : afficher toutes les options.
• Pour 5-7 à 10-12 options : afficher un sous-ensemble (5-7), avec un bouton Afficher/Masquer pour afficher le reste.
• Au-delà de 10-12 options : utiliser une liste déroulante.

De plus, une case à cocher sans libellé du groupe peut être utilisée dans un contexte où l’utilisateur doit affirmer ou approuver quelque chose. Par exemple, le consentement aux conditions d’utilisation.

Format par défaut

Utiliser le format par défaut dans la majorité des cas, lorsque l’espace disponible permet un affichage confortable.

Format compact

Utiliser le format compact dans les interfaces denses ou en contexte de formulaire très serré, où l’espace horizontal ou vertical est restreint.

Quand ne pas l’utiliser

Si plus de 12 options sont nécessaires : utiliser une liste déroulante.

Si les options sont longues et que celles-ci sont bien connues du public cible (utiliser une liste déroulante avec boîte combinée).

Si une seule réponse est permise (utiliser le composant Bouton radio).

Anatomie

Cette section définit les règles et contraintes sur les types de contenus (textuels, graphiques, interactifs, etc.) acceptés par chaque élément du composant.

Libellé du groupe

Doit être clair et précis. Il explique à l’utilisateur ce qu’il doit choisir.

Ajouter une astérisque si le champ est obligatoire. Pour plus de détails, consulter la fiche Indicateur de champ obligatoire.

Groupe d’options

Comporte un minimum de deux options.

Jusqu’à 5-7 options, toutes sont affichées. Au-delà, un bouton Afficher/Masquer permet d’afficher les choix restants.

Les options doivent être présentées dans un ordre logique, en mettant les plus probables en premier.

Les choix comme « Aucune de ces réponses », « Je ne sais pas » ou « Autre » sont à placer en dernier.

Libellé d’option

Le texte doit être court, compréhensible et autonome.

Bouton Afficher/Masquer

Ce lien apparaît automatiquement lorsque le nombre d’options affichables dépasse le seuil de 5-7. Il permet d’afficher ou masquer les options supplémentaires.

Gestion des erreurs

Un message d’erreur s’affiche sous le groupe si aucune option n’est sélectionnée à la validation. Le message doit être explicite, par exemple : « Vous devez sélectionner une option pour continuer ».