Bouton radio

زر اختيارRadio group

Stablesrc/dsm/components/radio.tsx

Sélection exclusive d'une option parmi plusieurs, derrière une légende commune. La variante « card » transforme chaque option en bloc bordé et cliquable, utile quand chaque choix mérite une description plus longue.

Import

import { RadioGroup } from "@/dsm/components/radio";

Exemples

Liste simple

Groupe de radios en colonne, avec une aide par option.

LTR

Situation familiale

CélibataireMarié(e)Divorcé(e)Veuf/Veuve

Variante carte

Options présentées en blocs bordés sélectionnables.

LTR

Mode de retrait de votre passeport

Retrait au guichetDisponible sous 5 jours ouvrés à l'agence choisie.Envoi postal recommandéCompter 7 à 10 jours ouvrés, frais d'envoi à votre charge.

États

Option désactivée et groupe en erreur.

LTR

Mode de paiement des droits de timbre

Carte bancaireEspèces au guichetVirement bancaire

Veuillez choisir un mode de paiement.

Usage

Quand l'utiliser

Utilisez `RadioGroup` pour un choix unique et exclusif entre 2 et 6 options visibles en permanence.
Utilisez `variant="card"` quand chaque option a besoin d'une description ou d'un poids visuel plus fort qu'un simple libellé (mode de retrait, formule d'abonnement).
Utilisez `orientation="row"` pour des options courtes qui tiennent sur une ligne.

Quand ne pas l'utiliser

N'utilisez pas `RadioGroup` pour plus de 6-7 options : basculez vers `Select`.
N'utilisez pas de bouton radio pour un choix qui peut être laissé vide sans conséquence : une case à cocher ou un interrupteur exprime mieux l'aspect facultatif.

Accessibilité & langues

Accessibilité

Le groupe est annoncé comme un ensemble grâce à la légende native (`Fieldset`), pas seulement comme des boutons isolés.
Chaque option est activable au clavier avec les flèches, une fois le focus posé dans le groupe.
En variante `card`, toute la carte est cliquable : la zone de clic dépasse largement le petit cercle du bouton radio.

RTL & multilingue

Le cercle et le texte utilisent un `gap` logique et s'inversent automatiquement en arabe.
La grille de cartes (`variant="card"`, `orientation="row"`) suit le flux normal du document, sans réordonnancement manuel nécessaire en RTL.

Propriétés

RadioGroup

Propriété	Type	Défaut	Description
legend*	ReactNode	—	Légende du groupe.
hint / error	ReactNode	—	Aide ou message d'erreur du groupe.
options*	{ value, label, hint?, disabled? }[]	—	Options proposées.
orientation	"row" \| "column"	column	Disposition des options.
variant	"default" \| "card"	default	Style de chaque option : simple ligne ou carte bordée.
value / defaultValue / onValueChange	string	—	Contrôle ou observe la valeur sélectionnée.

RadioOption

Propriété	Type	Défaut	Description
label*	ReactNode	—	Libellé de l'option, utilisé en dehors d'un `RadioGroup` DSM (par ex. avec le `RadioGroup` brut de Base UI).
hint	ReactNode	—	Texte secondaire de l'option.
variant	"default" \| "card"	default	Style de l'option.