Radio
Les boutons radio permettent aux utilisateurs de sélectionner une seule option dans une liste d'options mutuellement exclusives
Description
Les boutons radio permettent aux utilisateurs de sélectionner une seule option dans une liste d'options mutuellement exclusives. Toutes les options possibles sont exposées pour permettre aux utilisateurs de les comparer.
Veillez à ajouter suffisamment de contexte pour que les utilisateurs aient tout ce dont ils ont besoin pour prendre une décision éclairée.
Si il est possible de cacher les options sans nuire à la compréhension ou que celles-ci sont en trop grand nombre, on utilisera un champ select.
Si l'utilisateur doit pouvoir sélectionner plusieurs options, il faut dès lors utiliser des checkboxes.
Plateformes
Anatomie
- Group label (optionnel) : communique le contexte de la sélection
- Required (optionnel) : indique si l'input est requis ou non
- Tooltip (optionnel) : fournit des informations supplémentaires selon le contexte.
- Radio controller : indique l'état de sélection
- Label : décrit l'élément à sélectionner
- Border (optionnel)
- Erreur : indique clairement à l'utilisateur l'erreur qui a été faite dans le champ et comment la corriger
- Helper (optionnel) : indique les règles de saisie du champ
- Radio controller : indique l'état de sélection
Usage
Quand l'utiliser ?
Dans un formulaire :
- Lorsque l'utilisateur doit choisir un seul élément d'une liste de plusieurs éléments.
- Lorsque l'utilisateur a besoin de voir toutes les options disponibles. Si les options disponibles peuvent être cachées, envisagez d'utiliser un champ select car il utilise moins d'espace.
Do's and don'ts
-
Do
Il est obligatoire d'utiliser des boutons radio pour les options mutuellement exclusives
-
Don't
Il est interdit d'utiliser les boutons radio pour des options à choix multiples
-
Do
Il est obligatoire de rester consistant dans l'utilisation du style des éléments d’un groupe de radio
-
Don't
Il interdit d’utiliser des styles de radio différents dans un même groupe
-
Do
Il est recommandé de proposer une sélection par défaut dans la liste des boutons radio
-
Don't
Il est recommandé de proposer une sélection par défaut dans la liste des boutons radio
Anatomie
- Group label (optionnel) : communique le contexte de la sélection
- Required (optionnel) : indique si l'input est requis ou non
- Tooltip (optionnel) : fournit des informations supplémentaires selon le contexte.
- Radio controller : indique l'état de sélection
- Label : décrit l'élément à sélectionner
- Border (optionnel)
- Erreur : indique clairement à l'utilisateur l'erreur qui a été faite dans le champ et comment la corriger
- Helper (optionnel) : indique les règles de saisie du champ
- Radio controller : indique l'état de sélection
- Illustration
- Numéro de carte
- Logo de la carte
- Validité de la carte
Usage
Quand l'utiliser ?
Dans un formulaire :
- Lorsque l'utilisateur doit choisir un seul élément d'une liste de plusieurs éléments.
- Lorsque l'utilisateur a besoin de voir toutes les options disponibles. Si les options disponibles peuvent être cachées, envisagez d'utiliser un champ select car il utilise moins d'espace.
Do's and don'ts
-
Do
Il est obligatoire d'utiliser des boutons radio pour les options mutuellement exclusives
-
Don't
Il est interdit d'utiliser les boutons radio pour des options à choix multiples
-
Do
Il est obligatoire de rester consistant dans l'utilisation du style des éléments d’un groupe de radio
-
Don't
Il interdit d’utiliser des styles de radio différents dans un même groupe
-
Do
Il est recommandé de proposer une sélection par défaut dans la liste des boutons radio
-
Don't
Il est recommandé de proposer une sélection par défaut dans la liste des boutons radio
Des questions ou un feedback ?
N’hésitez pas à contacter la team Design System par mail.