Boutons radio React Native, construits avec Pressable
Guide des boutons radio React Native
Bouton radio React Native : groupe accessible, sans bibliothèque | We.Inc
React Native n'a pas de composant radio. Créez un groupe radio accessible à partir de Pressable avec accessibilityRole radio et accessibilityState checked. Aperçu en direct et code.
Le cœur de React Native ne propose aucun composant de bouton radio : sa liste de composants d'interface ne contient que Button et Switch. Construisez-en un avec Pressable : dessinez un cercle extérieur et un point intérieur, gardez la valeur sélectionnée dans le parent, et donnez à chaque option accessibilityRole="radio" ainsi que accessibilityState={{ checked }}. Enveloppez l'ensemble dans une View avec accessibilityRole="radiogroup".
Props d'accessibilité pour un groupe radio
Élément
Prop
Valeur
View englobante
accessibilityRole
"radiogroup"
Chaque option
accessibilityRole
"radio"
Chaque option
accessibilityState
{ checked: true ou false }
Option désactivée
accessibilityState
{ disabled: true }, plus la prop disabled de Pressable
Alternative plus récente
role / aria-checked
role="radio" avec aria-checked ; role l'emporte sur accessibilityRole
Voici une version web du même groupe : elle utilise les rôles ARIA correspondants, si bien que les touches fléchées déplacent le choix comme dans un groupe radio de navigateur. En dessous, le panneau affiche les props que chaque option porterait dans React Native pour la sélection actuelle, afin que vous voyiez ce qui est annoncé au lecteur d'écran.
Le parent conserve une seule valeur dans son état ; chaque option se compare à elle.
Appuyer sur une option appelle onChange avec sa propre valeur, ce qui désélectionne automatiquement les autres.
Chaque Pressable s'annonce comme un bouton radio et indique son état coché via accessibilityState.
La View englobante est marquée comme radiogroup et étiquetée avec la question.
Rendez toute la ligne cliquable, libellé compris, pas seulement le petit cercle.
Ajoutez hitSlop ou du padding pour que chaque cible soit confortable sous le pouce.
Utilisez l'indicateur pressed de la fonction de style pour donner un retour immédiat avant la mise à jour de l'état.
Ne présélectionnez une valeur par défaut que si une réponse est vraiment sans risque ; sinon laissez le groupe vide et validez.
Au-delà d'environ sept choix, une liste déroulante se lit généralement mieux qu'une colonne de cercles.
Questions fréquentes
Existe-t-il un composant RadioButton dans React Native ?
Non. La page officielle des composants ne liste que Button et Switch comme contrôles d'interface, les boutons radio viennent donc de votre propre code Pressable ou d'un kit UI que vous installez.
Comment un lecteur d'écran sait-il que mon cercle est un bouton radio ?
Définissez accessibilityRole="radio" sur le Pressable et accessibilityState={{ checked: isSelected }}. La documentation décrit le rôle radio comme représentant un bouton radio, et radiogroup comme un groupe de ces boutons.
Faut-il plutôt utiliser role et aria-checked ?
Les deux fonctionnent. React Native accepte aussi role="radio" et aria-checked, et la documentation indique que role a la priorité sur accessibilityRole lorsque les deux sont définis. Choisissez un style et utilisez-le dans toute l'application.
Boutons radio ou Switch ?
Un Switch sert à un seul réglage activé ou désactivé qui prend effet immédiatement. Les boutons radio servent à choisir exactement une option parmi plusieurs options nommées.
Pourquoi le construire vous-même
Un groupe radio représente peu de code : une ligne, deux cercles et une comparaison. L'écrire vous-même garantit qu'il correspond à votre design, n'alourdit pas le bundle et porte exactement les props d'accessibilité que vous choisissez.
Garder la valeur sélectionnée dans le parent fait du groupe un composant contrôlé, qui s'intègre donc à l'objet de valeurs d'un formulaire exactement comme un TextInput.
Dessiner le cercle
Utilisez une View de largeur et de hauteur égales, avec une bordure et un borderRadius égal à la moitié de la taille pour l'anneau. À l'intérieur, affichez une View pleine plus petite uniquement quand l'option est sélectionnée.
Gardez l'anneau visible dans les deux états et ne changez que le point. Une sélection indiquée par la seule couleur est difficile à voir pour les personnes daltoniennes.
Code du groupe radio
Composant RadioGroup
Uniquement des composants de base. Le parent transmet value et onChange, exactement comme pour un TextInput contrôlé.
L'utiliser dans un écran
L'état vit dans l'écran, le choix peut donc être validé et envoyé avec le reste d'un formulaire.
Livraison standard
Livraison express
Retrait en magasin
Aperçu du groupe radio
Mode de livraison
Cliquez sur une option ou utilisez les touches fléchées une fois le groupe sélectionné.