` element. **RadioGroup Props:** | Prop | Type | Default | Description | | :------------ | :--------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | name | `string` | - | Identifies the field when a form is submitted. | | defaultValue | `Value` | - | The uncontrolled value of the radio button that should be initially selected. To render a controlled radio group, use the `value` prop instead. | | value | `Value` | - | The controlled value of the radio item that should be currently selected. To render an uncontrolled radio group, use the `defaultValue` prop instead. | | onValueChange | `((value: Value, eventDetails: RadioGroup.ChangeEventDetails) => void)` | - | Callback fired when the value changes. | | form | `string` | - | Identifies the form that owns the radio inputs. Useful when the radio group is rendered outside the form. | | disabled | `boolean` | `false` | Whether the component should ignore user interaction. | | readOnly | `boolean` | `false` | Whether the user should be unable to select a different radio button in the group. | | required | `boolean` | `false` | Whether the user must choose a value before submitting a form. | | inputRef | `React.Ref` | - | A ref to access the hidden input element. | | className | `string \| ((state: RadioGroup.State) => string \| undefined)` | - | CSS class applied to the element, or a function that returns a class based on the component's state. | | style | `React.CSSProperties \| ((state: RadioGroup.State) => React.CSSProperties \| undefined)` | - | Style applied to the element, or a function that returns a style object based on the component's state. | | render | `ReactElement \| ((props: HTMLProps, state: RadioGroup.State) => ReactElement)` | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. | **RadioGroup Data Attributes:** | Attribute | Type | Description | | :------------ | :--- | :---------------------------------------- | | data-disabled | - | Present when the radio group is disabled. | ### RadioGroup.Props Re-export of [RadioGroup](/react/components/radio.md) props. ### RadioGroup.State ```typescript type RadioGroupState = { /** Whether the user should be unable to select a different radio button in the group. */ readOnly: boolean; /** Whether the user must tick a radio button within the group before submitting a form. */ required: boolean; /** Whether the component should ignore user interaction. */ disabled: boolean; /** Whether the field has been touched. */ touched: boolean; /** Whether the field value has changed from its initial value. */ dirty: boolean; /** Whether the field is valid. */ valid: boolean | null; /** Whether the field has a value. */ filled: boolean; /** Whether the field is focused. */ focused: boolean; }; ``` ### RadioGroup.ChangeEventReason ```typescript type RadioGroupChangeEventReason = 'none'; ``` ### RadioGroup.ChangeEventDetails ```typescript type RadioGroupChangeEventDetails = { /** The reason for the event. */ reason: 'none'; /** The native event associated with the custom event. */ event: Event; /** Cancels Base UI from handling the event. */ cancel: () => void; /** Allows the event to propagate in cases where Base UI will stop the propagation. */ allowPropagation: () => void; /** Indicates whether the event has been canceled. */ isCanceled: boolean; /** Indicates whether the event is allowed to propagate. */ isPropagationAllowed: boolean; /** The element that triggered the event, if applicable. */ trigger: Element | undefined; }; ``` ## Canonical Types Maps `Canonical`: `Alias` — Use Canonical when its namespace is already imported; otherwise use Alias. - `RadioGroup.State`: `RadioGroupState` - `RadioGroup.Props`: `RadioGroupProps` - `RadioGroup.ChangeEventReason`: `RadioGroupChangeEventReason` - `RadioGroup.ChangeEventDetails`: `RadioGroupChangeEventDetails` Provides a shared state to a series of radio buttons. Renders a `

` element. ### Root Represents the radio button itself. Renders a `` element and a hidden `` beside. **Root Props:** | Prop | Type | Default | Description | | :----------- | :--------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | value\* | `Value` | - | The unique identifying value of the radio in a group. | | nativeButton | `boolean` | `false` | Whether the component renders a native `