From e866d9d3a3268196d7600cfc2e760ecf49a03c5a Mon Sep 17 00:00:00 2001
From: atomiks <cc.glows@gmail.com>
Date: Tue, 20 Aug 2024 15:58:17 +1000
Subject: [PATCH] Integrate with Field

---
 .../Description/FieldDescription.test.tsx     | 20 +++++
 .../src/Field/Label/FieldLabel.test.tsx       | 20 +++++
 .../src/Field/Root/FieldRoot.test.tsx         | 89 +++++++++++++++++++
 .../mui-base/src/Radio/Root/RadioRoot.tsx     | 14 +--
 .../src/Radio/Root/RadioRootContext.ts        | 18 ++--
 .../mui-base/src/Radio/Root/useRadioRoot.tsx  | 32 +++++--
 .../src/RadioGroup/Root/RadioGroupRoot.tsx    | 33 ++++---
 .../RadioGroup/Root/RadioGroupRootContext.ts  | 30 +++----
 .../src/RadioGroup/Root/useRadioGroupRoot.ts  | 85 ++++++++++++++++--
 9 files changed, 285 insertions(+), 56 deletions(-)

diff --git a/packages/mui-base/src/Field/Description/FieldDescription.test.tsx b/packages/mui-base/src/Field/Description/FieldDescription.test.tsx
index ae3e43f2a..56ade9fbf 100644
--- a/packages/mui-base/src/Field/Description/FieldDescription.test.tsx
+++ b/packages/mui-base/src/Field/Description/FieldDescription.test.tsx
@@ -4,6 +4,8 @@ import * as Checkbox from '@base_ui/react/Checkbox';
 import * as Switch from '@base_ui/react/Switch';
 import * as NumberField from '@base_ui/react/NumberField';
 import * as Slider from '@base_ui/react/Slider';
+import * as RadioGroup from '@base_ui/react/RadioGroup';
+import * as Radio from '@base_ui/react/Radio';
 import { createRenderer, screen } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { describeConformance } from '../../../test/describeConformance';
@@ -104,5 +106,23 @@ describe('<Field.Description />', () => {
         );
       });
     });
+
+    describe('RadioGroup', () => {
+      it('supports RadioGroup', () => {
+        render(
+          <Field.Root>
+            <RadioGroup.Root>
+              <Radio.Root value="1" />
+            </RadioGroup.Root>
+            <Field.Description data-testid="description" />
+          </Field.Root>,
+        );
+
+        expect(screen.getByTestId('description')).to.have.attribute(
+          'id',
+          screen.getByRole('radiogroup').getAttribute('aria-describedby')!,
+        );
+      });
+    });
   });
 });
diff --git a/packages/mui-base/src/Field/Label/FieldLabel.test.tsx b/packages/mui-base/src/Field/Label/FieldLabel.test.tsx
index 16a8c2bce..c1cf8d645 100644
--- a/packages/mui-base/src/Field/Label/FieldLabel.test.tsx
+++ b/packages/mui-base/src/Field/Label/FieldLabel.test.tsx
@@ -4,6 +4,8 @@ import * as Checkbox from '@base_ui/react/Checkbox';
 import * as Switch from '@base_ui/react/Switch';
 import * as NumberField from '@base_ui/react/NumberField';
 import * as Slider from '@base_ui/react/Slider';
+import * as RadioGroup from '@base_ui/react/RadioGroup';
+import * as Radio from '@base_ui/react/Radio';
 import { createRenderer, screen } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { describeConformance } from '../../../test/describeConformance';
@@ -95,5 +97,23 @@ describe('<Field.Label />', () => {
         );
       });
     });
+
+    describe('RadioGroup', () => {
+      it('supports RadioGroup', () => {
+        render(
+          <Field.Root>
+            <RadioGroup.Root data-testid="radio-group">
+              <Radio.Root value="1" />
+            </RadioGroup.Root>
+            <Field.Label data-testid="label" />
+          </Field.Root>,
+        );
+
+        expect(screen.getByTestId('radio-group')).to.have.attribute(
+          'aria-labelledby',
+          screen.getByTestId('label').id,
+        );
+      });
+    });
   });
 });
diff --git a/packages/mui-base/src/Field/Root/FieldRoot.test.tsx b/packages/mui-base/src/Field/Root/FieldRoot.test.tsx
index e293e8e46..355eafa8a 100644
--- a/packages/mui-base/src/Field/Root/FieldRoot.test.tsx
+++ b/packages/mui-base/src/Field/Root/FieldRoot.test.tsx
@@ -4,6 +4,9 @@ import * as Checkbox from '@base_ui/react/Checkbox';
 import * as Switch from '@base_ui/react/Switch';
 import * as NumberField from '@base_ui/react/NumberField';
 import * as Slider from '@base_ui/react/Slider';
+import * as RadioGroup from '@base_ui/react/RadioGroup';
+import * as Radio from '@base_ui/react/Radio';
+import userEvent from '@testing-library/user-event';
 import {
   act,
   createRenderer,
@@ -221,6 +224,7 @@ describe('<Field.Root />', () => {
           </Field.Root>,
         );
 
+        // eslint-disable-next-line testing-library/no-node-access
         const input = container.querySelector<HTMLInputElement>('input')!;
         const thumb = screen.getByTestId('thumb');
 
@@ -231,6 +235,27 @@ describe('<Field.Root />', () => {
 
         expect(input).to.have.attribute('aria-invalid', 'true');
       });
+
+      it('supports RadioGroup', () => {
+        render(
+          <Field.Root validate={() => 'error'}>
+            <RadioGroup.Root data-testid="group">
+              <Radio.Root value="1">One</Radio.Root>
+              <Radio.Root value="2">Two</Radio.Root>
+            </RadioGroup.Root>
+            <Field.Error data-testid="error" />
+          </Field.Root>,
+        );
+
+        const group = screen.getByTestId('group');
+
+        expect(group).not.to.have.attribute('aria-invalid');
+
+        fireEvent.focus(group);
+        fireEvent.blur(group);
+
+        expect(group).to.have.attribute('aria-invalid', 'true');
+      });
     });
   });
 
@@ -405,6 +430,50 @@ describe('<Field.Root />', () => {
 
         expect(root).to.have.attribute('data-touched', 'true');
       });
+
+      it('supports RadioGroup (click)', () => {
+        render(
+          <Field.Root>
+            <RadioGroup.Root data-testid="group">
+              <Radio.Root value="1" data-testid="control">
+                One
+              </Radio.Root>
+              <Radio.Root value="2">Two</Radio.Root>
+            </RadioGroup.Root>
+          </Field.Root>,
+        );
+
+        const group = screen.getByTestId('group');
+        const control = screen.getByTestId('control');
+
+        fireEvent.click(control);
+
+        expect(group).to.have.attribute('data-touched', 'true');
+        expect(control).to.have.attribute('data-touched', 'true');
+      });
+
+      it('supports RadioGroup (blur)', async () => {
+        render(
+          <Field.Root>
+            <RadioGroup.Root data-testid="group">
+              <Radio.Root value="1" data-testid="control">
+                One
+              </Radio.Root>
+              <Radio.Root value="2">Two</Radio.Root>
+            </RadioGroup.Root>
+            <button />
+          </Field.Root>,
+        );
+
+        const group = screen.getByTestId('group');
+        const control = screen.getByTestId('control');
+
+        await userEvent.tab(); // onto control
+        await userEvent.tab(); // onto last button
+
+        expect(group).to.have.attribute('data-touched', 'true');
+        expect(control).to.have.attribute('data-touched', 'true');
+      });
     });
 
     describe('dirty', () => {
@@ -505,6 +574,7 @@ describe('<Field.Root />', () => {
         );
 
         const root = screen.getByTestId('root');
+        // eslint-disable-next-line testing-library/no-node-access
         const input = container.querySelector<HTMLInputElement>('input')!;
 
         expect(root).not.to.have.attribute('data-dirty');
@@ -513,6 +583,25 @@ describe('<Field.Root />', () => {
 
         expect(root).to.have.attribute('data-dirty', 'true');
       });
+
+      it('supports RadioGroup', () => {
+        render(
+          <Field.Root>
+            <RadioGroup.Root data-testid="group">
+              <Radio.Root value="1">One</Radio.Root>
+              <Radio.Root value="2">Two</Radio.Root>
+            </RadioGroup.Root>
+          </Field.Root>,
+        );
+
+        const group = screen.getByTestId('group');
+
+        expect(group).not.to.have.attribute('data-dirty');
+
+        fireEvent.click(screen.getByText('One'));
+
+        expect(group).to.have.attribute('data-dirty', 'true');
+      });
     });
   });
 });
diff --git a/packages/mui-base/src/Radio/Root/RadioRoot.tsx b/packages/mui-base/src/Radio/Root/RadioRoot.tsx
index c872fe81a..ff1f7f035 100644
--- a/packages/mui-base/src/Radio/Root/RadioRoot.tsx
+++ b/packages/mui-base/src/Radio/Root/RadioRoot.tsx
@@ -9,6 +9,7 @@ import { useRadioRoot } from './useRadioRoot';
 import { RadioRootContext } from './RadioRootContext';
 import { CompositeItem } from '../../Composite/Item/CompositeItem';
 import { NOOP } from '../../utils/noop';
+import { useFieldRootContext } from '../../Field/Root/FieldRootContext';
 
 const customStyleHookMapping: CustomStyleHookMapping<RadioRoot.OwnerState> = {
   checked(value) {
@@ -35,10 +36,12 @@ const RadioRoot = React.forwardRef(function RadioRoot(
     disabled: disabledRoot,
     readOnly: readOnlyRoot,
     required: requiredRoot,
-    setCheckedItem,
+    setCheckedValue,
   } = useRadioGroupRootContext();
 
-  const disabled = disabledRoot || disabledProp;
+  const { ownerState: fieldOwnerState, disabled: fieldDisabled } = useFieldRootContext();
+
+  const disabled = fieldDisabled || disabledRoot || disabledProp;
   const readOnly = readOnlyRoot || readOnlyProp;
   const required = requiredRoot || requiredProp;
 
@@ -50,15 +53,16 @@ const RadioRoot = React.forwardRef(function RadioRoot(
 
   const ownerState: RadioRoot.OwnerState = React.useMemo(
     () => ({
+      ...fieldOwnerState,
       required,
       disabled,
       readOnly,
       checked,
     }),
-    [disabled, readOnly, checked, required],
+    [fieldOwnerState, disabled, readOnly, checked, required],
   );
 
-  const contextValue: RadioRootContext.Value = React.useMemo(() => ownerState, [ownerState]);
+  const contextValue: RadioRootContext = React.useMemo(() => ownerState, [ownerState]);
 
   const { renderElement } = useComponentRenderer({
     propGetter: getRootProps,
@@ -72,7 +76,7 @@ const RadioRoot = React.forwardRef(function RadioRoot(
 
   return (
     <RadioRootContext.Provider value={contextValue}>
-      {setCheckedItem === NOOP ? renderElement() : <CompositeItem render={renderElement()} />}
+      {setCheckedValue === NOOP ? renderElement() : <CompositeItem render={renderElement()} />}
       <input {...getInputProps()} />
     </RadioRootContext.Provider>
   );
diff --git a/packages/mui-base/src/Radio/Root/RadioRootContext.ts b/packages/mui-base/src/Radio/Root/RadioRootContext.ts
index 85d39de54..660bbc371 100644
--- a/packages/mui-base/src/Radio/Root/RadioRootContext.ts
+++ b/packages/mui-base/src/Radio/Root/RadioRootContext.ts
@@ -1,6 +1,13 @@
 import * as React from 'react';
 
-export const RadioRootContext = React.createContext<RadioRootContext.Value | null>(null);
+export interface RadioRootContext {
+  disabled: boolean;
+  readOnly: boolean;
+  checked: boolean;
+  required: boolean;
+}
+
+export const RadioRootContext = React.createContext<RadioRootContext | null>(null);
 
 export function useRadioRootContext() {
   const value = React.useContext(RadioRootContext);
@@ -9,12 +16,3 @@ export function useRadioRootContext() {
   }
   return value;
 }
-
-export namespace RadioRootContext {
-  export interface Value {
-    disabled: boolean;
-    readOnly: boolean;
-    checked: boolean;
-    required: boolean;
-  }
-}
diff --git a/packages/mui-base/src/Radio/Root/useRadioRoot.tsx b/packages/mui-base/src/Radio/Root/useRadioRoot.tsx
index 3591c64d8..f03bf46c0 100644
--- a/packages/mui-base/src/Radio/Root/useRadioRoot.tsx
+++ b/packages/mui-base/src/Radio/Root/useRadioRoot.tsx
@@ -3,6 +3,7 @@ import * as React from 'react';
 import { mergeReactProps } from '../../utils/mergeReactProps';
 import { visuallyHidden } from '../../utils/visuallyHidden';
 import { useRadioGroupRootContext } from '../../RadioGroup/Root/RadioGroupRootContext';
+import { useFieldRootContext } from '../../Field/Root/FieldRootContext';
 
 /**
  *
@@ -13,10 +14,12 @@ import { useRadioGroupRootContext } from '../../RadioGroup/Root/RadioGroupRootCo
 export function useRadioRoot(params: useRadioRoot.Parameters) {
   const { disabled, readOnly, value, required } = params;
 
-  const { checkedItem, setCheckedItem, onValueChange, touched, setTouched } =
+  const { checkedValue, setCheckedValue, onValueChange, touched, setTouched } =
     useRadioGroupRootContext();
 
-  const checked = checkedItem === value;
+  const { setDirty, validityData, setTouched: setFieldTouched } = useFieldRootContext();
+
+  const checked = checkedValue === value;
 
   const inputRef = React.useRef<HTMLInputElement>(null);
 
@@ -26,7 +29,7 @@ export function useRadioRoot(params: useRadioRoot.Parameters) {
         role: 'radio',
         type: 'button',
         'aria-checked': checked,
-        'aria-required': required,
+        'aria-required': required || undefined,
         'aria-disabled': disabled || undefined,
         'aria-readonly': readOnly || undefined,
         onKeyDown(event) {
@@ -59,15 +62,15 @@ export function useRadioRoot(params: useRadioRoot.Parameters) {
   const getInputProps: useRadioRoot.ReturnValue['getInputProps'] = React.useCallback(
     (externalProps = {}) =>
       mergeReactProps<'input'>(externalProps, {
-        type: 'radio' as const,
+        type: 'radio',
         ref: inputRef,
         tabIndex: -1,
+        style: visuallyHidden,
+        'aria-hidden': true,
         disabled,
         checked,
         required,
         readOnly,
-        style: visuallyHidden,
-        'aria-hidden': true,
         onChange(event) {
           // Workaround for https://github.com/facebook/react/issues/9023
           if (event.nativeEvent.defaultPrevented) {
@@ -78,11 +81,24 @@ export function useRadioRoot(params: useRadioRoot.Parameters) {
             return;
           }
 
-          setCheckedItem(value);
+          setFieldTouched(true);
+          setDirty(value !== validityData.initialValue);
+          setCheckedValue(value);
           onValueChange?.(value, event);
         },
       }),
-    [disabled, readOnly, value, checked, setCheckedItem, required, onValueChange],
+    [
+      disabled,
+      checked,
+      required,
+      readOnly,
+      value,
+      setFieldTouched,
+      setDirty,
+      validityData.initialValue,
+      setCheckedValue,
+      onValueChange,
+    ],
   );
 
   return React.useMemo(
diff --git a/packages/mui-base/src/RadioGroup/Root/RadioGroupRoot.tsx b/packages/mui-base/src/RadioGroup/Root/RadioGroupRoot.tsx
index a1084e116..696b6d295 100644
--- a/packages/mui-base/src/RadioGroup/Root/RadioGroupRoot.tsx
+++ b/packages/mui-base/src/RadioGroup/Root/RadioGroupRoot.tsx
@@ -7,6 +7,7 @@ import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { useEventCallback } from '../../utils/useEventCallback';
 import { useRadioGroupRoot } from './useRadioGroupRoot';
 import { RadioGroupRootContext } from './RadioGroupRootContext';
+import { useFieldRootContext } from '../../Field/Root/FieldRootContext';
 
 const RadioGroupRoot = React.forwardRef(function RadioGroupRoot(
   props: RadioGroupRoot.Props,
@@ -15,7 +16,7 @@ const RadioGroupRoot = React.forwardRef(function RadioGroupRoot(
   const {
     render,
     className,
-    disabled,
+    disabled: disabledProp,
     readOnly,
     required,
     onValueChange: onValueChangeProp,
@@ -23,24 +24,29 @@ const RadioGroupRoot = React.forwardRef(function RadioGroupRoot(
     ...otherProps
   } = props;
 
-  const { getRootProps, checkedItem, setCheckedItem, touched, setTouched } =
+  const { getRootProps, getInputProps, checkedValue, setCheckedValue, touched, setTouched } =
     useRadioGroupRoot(props);
 
+  const { ownerState: fieldOwnerState, disabled: fieldDisabled } = useFieldRootContext();
+
+  const disabled = fieldDisabled || disabledProp;
+
   const onValueChange = useEventCallback(onValueChangeProp ?? (() => {}));
 
   const ownerState: RadioGroupRoot.OwnerState = React.useMemo(
     () => ({
+      ...fieldOwnerState,
       disabled: disabled ?? false,
       required: required ?? false,
       readOnly: readOnly ?? false,
     }),
-    [disabled, readOnly, required],
+    [fieldOwnerState, disabled, readOnly, required],
   );
 
-  const contextValue: RadioGroupRootContext.Value = React.useMemo(
+  const contextValue: RadioGroupRootContext = React.useMemo(
     () => ({
-      checkedItem,
-      setCheckedItem,
+      checkedValue,
+      setCheckedValue,
       onValueChange,
       disabled,
       readOnly,
@@ -48,7 +54,16 @@ const RadioGroupRoot = React.forwardRef(function RadioGroupRoot(
       touched,
       setTouched,
     }),
-    [checkedItem, setCheckedItem, onValueChange, disabled, readOnly, required, touched, setTouched],
+    [
+      checkedValue,
+      setCheckedValue,
+      onValueChange,
+      disabled,
+      readOnly,
+      required,
+      touched,
+      setTouched,
+    ],
   );
 
   const { renderElement } = useComponentRenderer({
@@ -63,9 +78,7 @@ const RadioGroupRoot = React.forwardRef(function RadioGroupRoot(
   return (
     <RadioGroupRootContext.Provider value={contextValue}>
       <CompositeRoot render={renderElement()} />
-      {props.name && (
-        <input type="hidden" name={props.name} value={checkedItem ?? ''} required={required} />
-      )}
+      <input {...getInputProps()} />
     </RadioGroupRootContext.Provider>
   );
 });
diff --git a/packages/mui-base/src/RadioGroup/Root/RadioGroupRootContext.ts b/packages/mui-base/src/RadioGroup/Root/RadioGroupRootContext.ts
index 1942bb4f1..bfefe14de 100644
--- a/packages/mui-base/src/RadioGroup/Root/RadioGroupRootContext.ts
+++ b/packages/mui-base/src/RadioGroup/Root/RadioGroupRootContext.ts
@@ -2,12 +2,23 @@
 import * as React from 'react';
 import { NOOP } from '../../utils/noop';
 
-export const RadioGroupRootContext = React.createContext<RadioGroupRootContext.Value>({
+export interface RadioGroupRootContext {
+  disabled: boolean | undefined;
+  readOnly: boolean | undefined;
+  required: boolean | undefined;
+  checkedValue: string | number | undefined;
+  setCheckedValue: React.Dispatch<React.SetStateAction<string | number | undefined>>;
+  onValueChange: (value: string | number, event: React.ChangeEvent<HTMLInputElement>) => void;
+  touched: boolean;
+  setTouched: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const RadioGroupRootContext = React.createContext<RadioGroupRootContext>({
   disabled: undefined,
   readOnly: undefined,
   required: undefined,
-  checkedItem: '',
-  setCheckedItem: NOOP,
+  checkedValue: '',
+  setCheckedValue: NOOP,
   onValueChange: NOOP,
   touched: false,
   setTouched: NOOP,
@@ -16,16 +27,3 @@ export const RadioGroupRootContext = React.createContext<RadioGroupRootContext.V
 export function useRadioGroupRootContext() {
   return React.useContext(RadioGroupRootContext);
 }
-
-export namespace RadioGroupRootContext {
-  export interface Value {
-    disabled: boolean | undefined;
-    readOnly: boolean | undefined;
-    required: boolean | undefined;
-    checkedItem: string | number | undefined;
-    setCheckedItem: React.Dispatch<React.SetStateAction<string | number | undefined>>;
-    onValueChange: (value: string | number, event: React.ChangeEvent<HTMLInputElement>) => void;
-    touched: boolean;
-    setTouched: React.Dispatch<React.SetStateAction<boolean>>;
-  }
-}
diff --git a/packages/mui-base/src/RadioGroup/Root/useRadioGroupRoot.ts b/packages/mui-base/src/RadioGroup/Root/useRadioGroupRoot.ts
index 7810fcbc1..9fce8f73e 100644
--- a/packages/mui-base/src/RadioGroup/Root/useRadioGroupRoot.ts
+++ b/packages/mui-base/src/RadioGroup/Root/useRadioGroupRoot.ts
@@ -1,6 +1,11 @@
 import * as React from 'react';
+import { contains } from '@floating-ui/react/utils';
 import { mergeReactProps } from '../../utils/mergeReactProps';
 import { useControlled } from '../../utils/useControlled';
+import { useFieldRootContext } from '../../Field/Root/FieldRootContext';
+import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
+import { useId } from '../../utils/useId';
+import { useFieldControlValidation } from '../../Field/Control/useFieldControlValidation';
 
 /**
  *
@@ -9,46 +14,112 @@ import { useControlled } from '../../utils/useControlled';
  * - [useRadioGroupRoot API](https://mui.com/base-ui/api/use-radio-group-root/)
  */
 export function useRadioGroupRoot(params: useRadioGroupRoot.Parameters) {
-  const { disabled, defaultValue, readOnly, value: externalValue } = params;
+  const { disabled = false, name, defaultValue, readOnly, value: externalValue } = params;
 
-  const [checkedItem, setCheckedItem] = useControlled<string | number | undefined>({
+  const {
+    labelId,
+    setDisabled,
+    setControlId,
+    setTouched: setFieldTouched,
+    validityData,
+    setValidityData,
+  } = useFieldRootContext();
+
+  const {
+    getValidationProps,
+    getInputValidationProps,
+    inputRef: inputValidationRef,
+    commitValidation,
+  } = useFieldControlValidation();
+
+  useEnhancedEffect(() => {
+    setDisabled(disabled);
+  }, [disabled, setDisabled]);
+
+  const id = useId();
+
+  useEnhancedEffect(() => {
+    setControlId(id);
+    return () => {
+      setControlId(undefined);
+    };
+  }, [id, setControlId]);
+
+  const [checkedValue, setCheckedValue] = useControlled<string | number | undefined>({
     controlled: externalValue,
     default: defaultValue,
     name: 'RadioGroup',
     state: 'value',
   });
 
+  useEnhancedEffect(() => {
+    if (validityData.initialValue === null && checkedValue !== validityData.initialValue) {
+      setValidityData((prev) => ({ ...prev, initialValue: checkedValue }));
+    }
+  }, [checkedValue, setValidityData, validityData.initialValue]);
+
   const [touched, setTouched] = React.useState(false);
 
   const getRootProps = React.useCallback(
     (externalProps = {}) =>
-      mergeReactProps<'div'>(externalProps, {
+      mergeReactProps<'div'>(getValidationProps(externalProps), {
         role: 'radiogroup',
         'aria-disabled': disabled || undefined,
         'aria-readonly': readOnly || undefined,
+        'aria-labelledby': labelId,
+        onBlur(event) {
+          if (!contains(event.currentTarget, event.relatedTarget)) {
+            setFieldTouched(true);
+            commitValidation(checkedValue);
+          }
+        },
         onKeyDownCapture(event) {
           if (event.key.startsWith('Arrow')) {
+            setFieldTouched(true);
             setTouched(true);
           }
         },
       }),
-    [disabled, readOnly],
+    [
+      checkedValue,
+      commitValidation,
+      disabled,
+      getValidationProps,
+      labelId,
+      readOnly,
+      setFieldTouched,
+    ],
+  );
+
+  const getInputProps = React.useCallback(
+    (externalProps = {}) =>
+      mergeReactProps(getInputValidationProps(externalProps), {
+        type: 'hidden',
+        value: checkedValue ?? '', // avoid uncontrolled -> controlled error
+        ref: inputValidationRef,
+        name,
+        disabled,
+        readOnly,
+      }),
+    [checkedValue, disabled, getInputValidationProps, inputValidationRef, name, readOnly],
   );
 
   return React.useMemo(
     () => ({
       getRootProps,
-      checkedItem,
-      setCheckedItem,
+      getInputProps,
+      checkedValue,
+      setCheckedValue,
       touched,
       setTouched,
     }),
-    [getRootProps, checkedItem, setCheckedItem, touched],
+    [getRootProps, getInputProps, checkedValue, setCheckedValue, touched],
   );
 }
 
 namespace useRadioGroupRoot {
   export interface Parameters {
+    name?: string;
     disabled?: boolean;
     readOnly?: boolean;
     defaultValue?: string | number;