Comparaison comportementale
Groupe de boutons radio vs Interrupteur
Choisir Groupe de boutons radio pour : Choisir un mode de livraison parmi des alternatives visibles. Choisir Interrupteur pour : Activer ou désactiver un réglage de compte.
| Dimension | Groupe de boutons radioRadio group | InterrupteurSwitch |
|---|---|---|
| Déclenchement | Clic ou toucher sur une option ; Tab entre dans le groupe et les flèches déplacent le choix. | Clic, toucher ou Espace sur l’interrupteur ou son libellé. |
| Modalité | Contrôle de formulaire non modal pour une seule valeur dans un groupe nommé. | Contrôle non modal pour un réglage appliqué immédiatement. |
| Positionnement | Options groupées en ligne ou empilées sous une question commune. | Dans le flux avec un libellé persistant et un état activé/désactivé clairement visible. |
| Interactivité | La sélection est exclusive ; les flèches gérées changent l’option active. | Bascule et applique immédiatement un réglage ; ce n’est pas un choix en attente de validation du formulaire. |
| Focus | Le groupe natif se comporte comme un seul arrêt une fois une valeur choisie, avec un focus visible sur le bouton actif. | L'interrupteur est un arrêt de focus visible et son libellé active le même contrôle. |
| Fermeture | Sans objet : la sélection reste jusqu'au choix d'un autre bouton ou à la réinitialisation. | Sans objet : le réglage persiste jusqu'à la prochaine bascule ; un échec restaure l'état précédent. |
| Rôle accessible | native fieldset and radio inputs | switch |
| Cas d’usage | Choisir un mode de livraison parmi des alternatives visibles | Activer ou désactiver un réglage de compte |
| Comportement mobile | Préférer des options empilées avec de grands libellés tactiles lorsque les textes ne sont pas très courts. | Utiliser une grande cible de libellé et conserver un état clair dans les deux thèmes. |