Radio Group
Group of radio buttons for selecting a single option from multiple choices
A radio group lets the user pick exactly one option from a small, visible set. Use it when every choice should stay on screen, like a plan tier or a shipping speed. For more than a handful of options, or when the choices can stay collapsed, use Select instead.
Preview
Installation
Usage
Composition
RadioGroup owns the selected value; each RadioGroupItem carries its own value and renders the indicator.
Examples
Controlled
Use value and onValueChange on RadioGroup to drive the selection yourself.
Selected: comfortable
With Descriptions
Pair each item with a label and helper text for richer options.
Disabled Options
Set disabled on a RadioGroupItem to take a single option out of play.
Elevated Variant
Use variant="elevated" on RadioGroupItem for a translucent overlay that adapts to the substrate, so the control reads clearly on a Card, Dialog, or popover instead of collapsing into it. See the Surfaces docs.
variant="elevated" on RadioGroupItem when the radio group sits inside a Card, Dialog, or popover.Default
Elevated
| Variant | Description |
|---|---|
default | Opaque bg-input, for radios on the page background. |
elevated | Translucent bg-input-elevated, for raised surfaces. |
Form Integration
Use Field and Fieldset with the render prop. See the Forms guide for more patterns.
API Reference
The RadioGroup component is built on top of Base UI's RadioGroup. All Base UI props are supported. The documentation below only covers custom props specific to our implementation.