Radio
Single-choice option row for use inside RadioGroup and Fieldset.
Base UI
Radio is one row in a mutually exclusive set. Each option carries its own label and optional description; name, validation, and group-level errors belong on an external Field.Root and Fieldset, not on individual radios.
Always nest options inside RadioGroup so Base UI keeps keyboard roving and selection in sync. Add Fieldset with render={<RadioGroup />} only when the group needs a shared legend or helper copy; otherwise RadioGroup may sit directly in Field.Root.
When to use
- Exactly one choice from a short, visible list (plan, contact channel, payout method)
- Options that benefit from a one-line description beside each control
When not to use
- Several options can stay on at once → Checkbox
- The list is long, grouped in a popup, or needs a closed trigger → Select
- Type-to-filter or free-form text → Autocomplete
Related
- Fieldset — legend and group helper for RadioGroup
- Checkbox — independent multi-select options
- Select — closed-choice dropdown for longer lists
Common examples
Labeled group
A Fieldset-backed RadioGroup with labeled rows is the default single-choice pattern. Each option keeps its own label / description; the group owns value and onValueChange.
Without Fieldset
When every option already has a visible label and the group needs no shared legend, put RadioGroup directly under Field.Root.
Surface cards
hPadding / vPadding let each control fill a bordered Surface. Keep a resting color on every card and raise it when selected — toggling color on/off changes fill and can read as a layout jump. Equal columns use Grid columns={2}, not a row Stack with uneven content widths.
Ask your agent
Add a billing plan picker: heading "Plan", three options (Starter, Pro, Enterprise) each with a one-line description. Starter selected by default.Last updated on