Comparaison comportementale
Case à cocher vs Groupe de boutons radio
Différence décisive
Chaque Case à cocher est un choix indépendant ; dans un Groupe de boutons radio, choisir une option désélectionne la précédente.
Critères de choix, liens et sources
- Case à cocherChoisis Case à cocher si l’utilisateur peut cocher zéro, une ou plusieurs options.Ouvrir la fiche Case à cocher
- Groupe de boutons radioChoisis Groupe de boutons radio si exactement une option doit être retenue parmi des alternatives visibles.Ouvrir la fiche Groupe de boutons radio
Voir les neuf dimensionsVoir les sources
Choix et états binaires
Essayer
S’agit-il d’une valeur indépendante, d’un choix exclusif groupé ou d’un réglage marche ou arrêt ?
Case à cocher
Contexte commun aux essais
Un parcours de réglages demande à l'utilisateur de faire un choix et de comprendre s’il est indépendant, exclusif ou exprime un réglage marche ou arrêt.
Case à cocher
Mission
Case à cocher - Checkbox
Basculer deux préférences avec Espace, puis utiliser la case parente pour démontrer l'état mixte.
Étape 1 sur 3
Essayer
Manipule le composant. Le résultat de ton essai apparaît juste au-dessus. Avance à ton rythme.
Comportement et cas limite
- À observer
- Chaque option étiquetée expose son propre état coché et peut être envoyée avec le formulaire.
- Cas limite
- La case Tout sélectionner devient indéterminée lorsque seuls certains choix enfants sont cochés.
Groupe de boutons radio
Mission
Groupe de boutons radio - Radio group
Entrer dans le groupe avec Tab, choisir Express avec les flèches et vérifier que Standard est désélectionné.
Étape 1 sur 3
Essayer
Manipule le composant. Le résultat de ton essai apparaît juste au-dessus. Avance à ton rythme.
Comportement et cas limite
- À observer
- Une option de livraison est cochée sous une légende visible commune.
- Cas limite
- Lorsque le groupe obligatoire n’est pas renseigné, l’envoi focalise le groupe et explique qu’un mode doit être choisi.
Ce que cet essai montre
Checkbox représente un choix coché indépendant ; Radio group impose un seul choix, tandis que Switch exprime un état marche ou arrêt. Le moment de l’enregistrement relève du produit, pas de la distinction sémantique.
Lequel convient à ton besoin ?
Case à cocher
Sélectionner un nombre libre d'options indépendantes
Groupe de boutons radio
Choisir un mode de livraison parmi des alternatives visibles
Différence et sources
Checkbox représente un choix coché indépendant ; Radio group impose un seul choix, tandis que Switch exprime un état marche ou arrêt. Le moment de l’enregistrement relève du produit, pas de la distinction sémantique.
Consulter les sourcesParties du spécimen
Sélectionne un repère numéroté sur le schéma, ou utilise la liste ci-dessous, pour afficher son rôle. Le schéma montre l'état représentatif du concept.
Contrôle
L'élément interactif qui reçoit la saisie et expose son état.
Décision
Question de famille
S’agit-il d’une valeur indépendante, d’un choix exclusif groupé ou d’un réglage marche ou arrêt ?
Trois critères pour choisir
- Cas d’usage
Case à cocher
Sélectionner un nombre libre d'options indépendantes
Groupe de boutons radio
Choisir un mode de livraison parmi des alternatives visibles
- Interactivité
Case à cocher
Bascule son propre état coché ; plusieurs cases peuvent être sélectionnées indépendamment.
Groupe de boutons radio
La sélection est exclusive ; les flèches gérées changent l’option active.
- Déclenchement
Case à cocher
Clic, toucher ou Espace sur la case ou son libellé associé.
Groupe de boutons radio
Clic ou toucher sur une option ; Tab entre dans le groupe et les flèches déplacent le choix.
Neuf dimensions
- Déclenchement
Case à cocher
Clic, toucher ou Espace sur la case ou son libellé associé.
Groupe de boutons radio
Clic ou toucher sur une option ; Tab entre dans le groupe et les flèches déplacent le choix.
- Modalité
Case à cocher
Valeur de formulaire booléenne ou mixte, indépendante et non modale.
Groupe de boutons radio
Contrôle de formulaire non modal pour une seule valeur dans un groupe nommé.
- Positionnement
Case à cocher
Dans le flux avec son libellé persistant, souvent dans un groupe vertical.
Groupe de boutons radio
Options groupées en ligne ou empilées sous une question commune.
- Interactivité
Case à cocher
Bascule son propre état coché ; plusieurs cases peuvent être sélectionnées indépendamment.
Groupe de boutons radio
La sélection est exclusive ; les flèches gérées changent l’option active.
- Focus
Case à cocher
Chaque case native possède un focus visible et son libellé agrandit la cible au pointeur.
Groupe de boutons radio
Le groupe natif se comporte comme un seul arrêt une fois une valeur choisie, avec un focus visible sur le bouton actif.
- Fermeture
Case à cocher
Sans objet : la case persiste jusqu'à ce que l'utilisateur la bascule ou réinitialise le formulaire.
Groupe de boutons radio
Sans objet : la sélection reste jusqu'au choix d'un autre bouton ou à la réinitialisation.
- Rôle accessible
Case à cocher
input[type=checkbox]
Groupe de boutons radio
fieldset > input[type=radio]
- Cas d’usage
Case à cocher
Sélectionner un nombre libre d'options indépendantes
Groupe de boutons radio
Choisir un mode de livraison parmi des alternatives visibles
- Comportement mobile
Case à cocher
Transformer toute la ligne du libellé en grande cible tactile sans masquer l’état coché.
Groupe de boutons radio
Préférer des options empilées avec de grands libellés tactiles lorsque les textes ne sont pas très courts.
| Dimension | Case à cocherCheckbox | Groupe de boutons radioRadio group |
|---|---|---|
| Déclenchement | Clic, toucher ou Espace sur la case ou son libellé associé. | Clic ou toucher sur une option ; Tab entre dans le groupe et les flèches déplacent le choix. |
| Modalité | Valeur de formulaire booléenne ou mixte, indépendante et non modale. | Contrôle de formulaire non modal pour une seule valeur dans un groupe nommé. |
| Positionnement | Dans le flux avec son libellé persistant, souvent dans un groupe vertical. | Options groupées en ligne ou empilées sous une question commune. |
| Interactivité | Bascule son propre état coché ; plusieurs cases peuvent être sélectionnées indépendamment. | La sélection est exclusive ; les flèches gérées changent l’option active. |
| Focus | Chaque case native possède un focus visible et son libellé agrandit la cible au pointeur. | Le groupe natif se comporte comme un seul arrêt une fois une valeur choisie, avec un focus visible sur le bouton actif. |
| Fermeture | Sans objet : la case persiste jusqu'à ce que l'utilisateur la bascule ou réinitialise le formulaire. | Sans objet : la sélection reste jusqu'au choix d'un autre bouton ou à la réinitialisation. |
| Rôle accessible | input[type=checkbox] | fieldset > input[type=radio] |
| Cas d’usage | Sélectionner un nombre libre d'options indépendantes | Choisir un mode de livraison parmi des alternatives visibles |
| Comportement mobile | Transformer toute la ligne du libellé en grande cible tactile sans masquer l’état coché. | Préférer des options empilées avec de grands libellés tactiles lorsque les textes ne sont pas très courts. |