Radio Components
Radio Examples
Simple Radio Buttons
Label Position
All Sizes
All Colors
With Helper Text
Perfect for trying out our service
For professionals and small teams
Disabled
RadioGroup (Vertical)
$0/month - Basic features
$29/month - All features
Custom pricing
Selected plan:pro
RadioGroup (Horizontal)
Selected size:medium
RadioGroup (Grid)
Practical Use Cases
Payment Method
Visa, Mastercard, Amex
Pay with your PayPal account
Direct bank transfer
Choose Plan
$29/mo
Cancel anytime
$290/year
Save 20%
Best Value
Customer Survey
RadioFilter
Un seul choix parmi quelques-uns, en gros boutons : une fois le choix fait, les autres se replient et × les fait revenir. Au clavier, les flèches parcourent les options, qui réapparaissent toutes tant que le focus est dans le groupe.
Le motif d’un écart
Motif
Effacer le choix
onChange → null (aucun motif)
Tailles
xs
Effacer le choix
sm
Effacer le choix
md
Effacer le choix
lg
Effacer le choix
xl
Effacer le choix
Couleurs, styles, une option désactivée
color="primary"
Effacer le choix
color="secondary" style="outline"
Effacer le choix
color="accent" style="soft", « Autre » désactivé
Effacer le choix
Dans un formulaire
Le choix part avec le formulaire sous son name. × ne reprend que ce choix : le commentaire reste, là où un bouton reset viderait tout.