Radio Group
Single choice from a set.
Usage
Compose RadioGroup.Root with RadioGroup.Item inside label elements. Bind the root's value for selection state.
Orientation
Pass orientation="horizontal" to RadioGroup.Root to lay items in a row.
States
Individual items can be disabled without disabling the whole group.
Props
RadioGroup.Root
| Prop | Type | Default |
|---|---|---|
invalid Marks the control as failing validation. Always applies the invalid styling. Also sets `aria-invalid`, which this element's `radiogroup` role supports. Prefer letting `Field` drive this: passing `Field` an `error` is what makes a field invalid, so the message the user reads and the state of the control cannot disagree. | boolean | false |
class | string | — |
child bits-ui | Snippet<[{ props: Record<string, unknown>; }]> | undefined | — |
children bits-ui | Snippet<[]> | undefined | — |
disabled bits-ui Whether the radio group is disabled. | boolean | undefined | false |
id bits-ui | string | undefined | — |
loop bits-ui Whether to loop around the radio items when navigating with the keyboard. | boolean | undefined | true |
name bits-ui The name to apply to the radio group's input element for form submission. If not provided, a hidden input will not be rendered and the radio group will not be part of a form. | string | undefined | undefined |
onValueChange bits-ui The callback to call when the selected radio item changes. | OnChangeFn<string> | undefined | — |
orientation bits-ui The orientation of the radio group. Used to determine how keyboard navigation should work. | Orientation | undefined | "vertical" |
readonly bits-ui Whether the radio group is readonly. When readonly, users can focus and navigate through items but cannot change the value. | boolean | undefined | false |
ref bits-ui | HTMLElement | null | undefined | — |
required bits-ui Whether the radio group is required for form submission. If `true`, ensure you provide a `name` prop so the hidden input is rendered. | boolean | undefined | — |
value bits-ui The value of the selected radio item. | string | undefined | "" |
RadioGroup.Item
| Prop | Type | Default |
|---|---|---|
class | string | — |
child bits-ui | Snippet<[RadioGroupItemSnippetProps & { props: Record<string, unknown>; }]> | undefined | — |
disabled bits-ui Whether the radio item is disabled. | boolean | null | undefined | false |
id bits-ui | string | undefined | — |
ref bits-ui | HTMLElement | null | undefined | — |
value required bits-ui The value of the radio item. | string | — |
Both subcomponents also forward all Bits RadioGroup props via spreading.