Radio
Le choix unique dans une courte liste d'options. Le kit ne fournit pas de conteneur de groupe : l'exclusivité se joue dans l'état de l'écran.
Utilisation
import { Radio, RadioItem } from "@monstera/ui"Choix exclusif
Chaque bouton est contrôlé isolément. C'est la valeur unique du groupe qui les rend exclusifs, le kit ne désélectionne jamais un voisin de lui-même.
États du bouton
RadioItem est le bouton nu, à étiqueter par aria-label. Le point de sélection n'est monté qu'à la sélection : il arrive en grossissant, avec un léger dépassement.
Option indisponible
Un bouton désactivé cesse de répondre et vire au gris, mais son libellé garde sa couleur : c'est à la formulation de dire pourquoi l'option est fermée.
Toujours une option cochée
Sauf exception métier stricte, un groupe de Radio arrive avec une option déjà sélectionnée. Un groupe entièrement vide au chargement demande un travail que l'interface peut faire à la place du lecteur : elle sait presque toujours quel est le cas le plus courant, et le proposer coûte un clic de moins sans rien empêcher.
L'exception, c'est quand aucune valeur par défaut n'est légitime, typiquement quand le choix engage et qu'un défaut serait pris pour un conseil.
Une option temporairement fermée se désactive, elle ne se cache pas : la masquer laisse croire qu'elle n'existe pas, alors que la voir grisée dit qu'elle existe mais pas maintenant.
Accessibilité
Un jeu de radios se pose dans un conteneur role="radiogroup" nommé par aria-label, ou par aria-labelledby vers la question affichée : sans lui, un lecteur d'écran lit des options sans savoir à quelle question elles répondent.
API
Radio
Prop
Type
RadioItem
Prop
Type