Composants
Radio
Un bouton radio permet aux utilisateurs de ne sélectionner qu'une seule valeur dans une liste de deux options ou plus.
# Usage
Les Radio buttons sont généralement utilisés en groupes, permettant aux utilisateurs de choisir une seule option parmi plusieurs. Lorsqu'un radio button dans le groupe est sélectionné, les autres se désélectionnent automatiquement.
Quand utiliser
-
Choix exclusifs : lorsque l'utilisateur doit sélectionner une option unique parmi plusieurs.
-
Formulaires : pour les questions à choix unique dans les formulaires, comme le type de livraison ou la méthode de paiement.
-
Paramètres de configuration : pour les options de configuration où une seule option peut être active à la fois.
Quand ne pas utiliser
-
Choix multiples : Utilisez des checkbox si l'utilisateur peut sélectionner plusieurs options simultanément.
-
Actions instantanées : Utilisez des boutons pour des actions immédiates (comme soumettre un formulaire).
-
Longues listes : Si vous avez une longue liste d'options, à partir de 6-7 options envisagez d'utiliser le composant select pour économiser de l'espace.
# Do & Don't
Sélection multiple
Ne pas utiliser de radio button pour de la sélection multiple, utiliser une checkbox.
Radio buttons et checkbox
Ne pas mélanger radio button et checkox dans la même liste.
Label des radio buttons
Un radio button doit toujours contenir un label pour des raisons de compréhension et d’accessibilité.
Utilisation des radio buttons
Un radio button ne doit pas être utilisé seul.
Label des radio tiles
Le radio tiles doit toujours contenir un label en bold. Ce label peut être accompagné d’une description lorsque celui-ci nécessite un ou des éléments complémentaires pour guider au mieux l’utilisateur dans son choix.