RadioGroup
A mutually exclusive choice control for forms, option lists, and descriptive cards.
Controls
import { RadioGroup, RadioGroupItem } from "raft-ui";
<RadioGroup defaultValue="option" aria-label="Options">
<RadioGroupItem value="option" />
</RadioGroup>Choose one mode before confirming.
API#WIP
| Prop | Type | Default | Description |
|---|---|---|---|
value | T | — | Controlled selected value. |
defaultValue | T | — | Initial selected value for uncontrolled usage. |
onValueChange | (value: T, details) => void | — | Called when a different item is selected. |
aria-label | string | — | Native ARIA attribute naming the group for assistive tech. Set it when the group has no visible label. |
name | string | — | Native form field name passed to the hidden radio inputs. |
disabled | boolean | false | Disables selection across the whole group. |
readOnly | boolean | false | Keeps the group focusable but prevents changing the selection. |
required | boolean | false | Marks the hidden native inputs required for form validation. |
...props | Base UI RadioGroup.Props<T> | — | Owns one selected value, roving keyboard behavior, form metadata, and remaining Base UI root props. |
| Prop | Type | Default | Description |
|---|---|---|---|
value | T | — | Option value selected when this item is chosen. |
appearance | "default" | "none" | "default" | Use "none" when the surrounding row or card owns the selected visual and the control should stay visually hidden. |
...props | Base UI Radio.Root.Props<T> | — | Compose inside a clickable label or descriptive option row. Children replace the default RadioGroupIndicator. |
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Optional custom mark. Defaults to the themed inner dot. |
...props | Base UI Radio.Indicator.Props | — | Optional visual indicator rendered by RadioGroupItem by default. Pass as children when you need a custom mark. |