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.
valueT
Controlled selected value.
defaultValueT
Initial selected value for uncontrolled usage.
onValueChange(value: T, details) => void
Called when a different item is selected.
aria-labelstring
Native ARIA attribute naming the group for assistive tech. Set it when the group has no visible label.
namestring
Native form field name passed to the hidden radio inputs.
disableddefault: falseboolean
Disables selection across the whole group.
readOnlydefault: falseboolean
Keeps the group focusable but prevents changing the selection.
requireddefault: falseboolean
Marks the hidden native inputs required for form validation.
...propsBase 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 | — | 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. |
valueT
Option value selected when this item is chosen.
appearancedefault: "default""default" | "none"
Use "none" when the surrounding row or card owns the selected visual and the control should stay visually hidden.
...propsBase UI Radio.Root.Props<T>
Compose inside a clickable label or descriptive option row. Children replace the default RadioGroupIndicator.
| 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. |
childrenReactNode
Optional custom mark. Defaults to the themed inner dot.
...propsBase UI Radio.Indicator.Props
Optional visual indicator rendered by RadioGroupItem by default. Pass as children when you need a custom mark.
| 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. |