` element. **RadioGroup Props:** | Name | 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 | Ref | - | A ref to access the hidden input element. | | class | JSX.ClassValue \| ((state) => JSX.ClassValue) | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | style | JSX.CSSProperties \| string \| ((state) => JSX.CSSProperties \| string \| undefined) | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | render | keyof JSX.IntrinsicElements \| Component \| ((props, state) => JSX.Element) | - | Replace the default element with a tag name, component, or render function. | **RadioGroup Data Attributes:** | Name | Type | Default | Description | | ------------- | ---- | ------- | ----------------------------------------- | | data-disabled | - | - | Present when the radio group is disabled. | #### 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; }; ```