From 38fe43155e7f55d9190ac2bcd405612dec598d5e Mon Sep 17 00:00:00 2001
From: Valerii Sidorenko <balepas@nebius.com>
Date: Tue, 18 Jun 2024 23:30:31 +0200
Subject: [PATCH] feat: support form reset for inputs (#1660)

---
 .../Checkbox/__tests__/Checkbox.test.tsx      | 93 +++++++++++++++++++
 src/components/Palette/Palette.tsx            |  8 +-
 .../RadioGroup/__tests__/RadioGroup.test.tsx  | 93 +++++++++++++++++++
 src/components/Select/types.ts                |  5 +-
 src/components/controls/TextArea/TextArea.tsx |  4 +-
 .../TextArea/__tests__/TextArea.test.tsx      | 90 ++++++++++++++++++
 .../controls/TextInput/TextInput.tsx          |  5 +-
 .../__tests__/TextInput.input.test.tsx        | 90 ++++++++++++++++++
 src/components/types.ts                       |  6 +-
 src/hooks/private/useCheckbox/useCheckbox.ts  |  5 +-
 src/hooks/private/useRadio/useRadio.ts        | 23 +++--
 .../private/useRadioGroup/useRadioGroup.ts    | 48 +++++-----
 12 files changed, 420 insertions(+), 50 deletions(-)

diff --git a/src/components/Checkbox/__tests__/Checkbox.test.tsx b/src/components/Checkbox/__tests__/Checkbox.test.tsx
index b609f898f8..663f538230 100644
--- a/src/components/Checkbox/__tests__/Checkbox.test.tsx
+++ b/src/components/Checkbox/__tests__/Checkbox.test.tsx
@@ -191,4 +191,97 @@ describe('Checkbox', () => {
         checkbox.blur();
         expect(handleOnBlur).toHaveBeenCalledTimes(1);
     });
+
+    describe('form', () => {
+        test('should submit no value by default', async () => {
+            let value;
+            const onSubmit = jest.fn((e) => {
+                e.preventDefault();
+                const formData = new FormData(e.currentTarget);
+                value = [...formData.entries()];
+            });
+            render(
+                <form data-qa="form" onSubmit={onSubmit}>
+                    <Checkbox name="checkbox-field" value="value" />
+                    <button type="submit" data-qa="submit">
+                        submit
+                    </button>
+                </form>,
+            );
+            await userEvent.click(screen.getByTestId('submit'));
+            expect(onSubmit).toHaveBeenCalledTimes(1);
+            expect(value).toEqual([]);
+        });
+
+        test('should submit default value', async () => {
+            let value;
+            const onSubmit = jest.fn((e) => {
+                e.preventDefault();
+                const formData = new FormData(e.currentTarget);
+                value = [...formData.entries()];
+            });
+
+            render(
+                <form data-qa="form" onSubmit={onSubmit}>
+                    <Checkbox name="checkbox-field" value="value" defaultChecked />
+                    <button type="submit" data-qa="submit">
+                        submit
+                    </button>
+                </form>,
+            );
+            await userEvent.click(screen.getByTestId('submit'));
+            expect(onSubmit).toHaveBeenCalledTimes(1);
+            expect(value).toEqual([['checkbox-field', 'value']]);
+        });
+
+        test('should submit controlled value', async () => {
+            let value;
+            const onSubmit = jest.fn((e) => {
+                e.preventDefault();
+                const formData = new FormData(e.currentTarget);
+                value = [...formData.entries()];
+            });
+            render(
+                <form data-qa="form" onSubmit={onSubmit}>
+                    <Checkbox name="checkbox-field" value="value" checked />
+                    <button type="submit" data-qa="submit">
+                        submit
+                    </button>
+                </form>,
+            );
+            await userEvent.click(screen.getByTestId('submit'));
+            expect(onSubmit).toHaveBeenCalledTimes(1);
+            expect(value).toEqual([['checkbox-field', 'value']]);
+        });
+
+        test('supports form reset', async () => {
+            function Test() {
+                const [value, setValue] = React.useState(true);
+                return (
+                    <form data-qa="form">
+                        <Checkbox
+                            name="checkbox-field"
+                            value="value"
+                            checked={value}
+                            onUpdate={setValue}
+                        />
+                        <input type="reset" data-qa="reset" />
+                    </form>
+                );
+            }
+
+            render(<Test />);
+            const form = screen.getByTestId('form');
+            expect(form).toHaveFormValues({'checkbox-field': true});
+
+            await userEvent.tab();
+            await userEvent.keyboard('{Enter}');
+
+            expect(form).toHaveFormValues({});
+
+            const button = screen.getByTestId('reset');
+            await userEvent.click(button);
+            expect(form).toHaveFormValues({'checkbox-field': true});
+        });
+    });
 });
diff --git a/src/components/Palette/Palette.tsx b/src/components/Palette/Palette.tsx
index 7c55673c08..afdfcf0ff7 100644
--- a/src/components/Palette/Palette.tsx
+++ b/src/components/Palette/Palette.tsx
@@ -6,8 +6,9 @@ import {useSelect} from '../../hooks';
 import {useForkRef} from '../../hooks/useForkRef/useForkRef';
 import type {ButtonProps} from '../Button';
 import {Button} from '../Button';
-import type {ControlGroupProps, DOMProps, QAProps} from '../types';
+import type {AriaLabelingProps, DOMProps, QAProps} from '../types';
 import {block} from '../utils/cn';
+import {filterDOMProps} from '../utils/filterDOMProps';
 
 import {usePaletteGrid} from './hooks';
 import {getPaletteRows} from './utils';
@@ -32,7 +33,7 @@ export type PaletteOption = Pick<ButtonProps, 'disabled' | 'title'> & {
 };
 
 export interface PaletteProps
-    extends Pick<ControlGroupProps, 'aria-label' | 'aria-labelledby'>,
+    extends AriaLabelingProps,
         Pick<ButtonProps, 'disabled' | 'size'>,
         DOMProps,
         QAProps {
@@ -165,9 +166,8 @@ export const Palette = React.forwardRef<HTMLDivElement, PaletteProps>(function P
 
     return (
         <div
+            {...filterDOMProps(props, {labelable: true})}
             {...gridProps}
-            aria-label={props['aria-label']}
-            aria-labelledby={props['aria-labelledby']}
             ref={handleRef}
             className={b({size}, className)}
             style={style}
diff --git a/src/components/RadioGroup/__tests__/RadioGroup.test.tsx b/src/components/RadioGroup/__tests__/RadioGroup.test.tsx
index c397e7089c..7a3074ee47 100644
--- a/src/components/RadioGroup/__tests__/RadioGroup.test.tsx
+++ b/src/components/RadioGroup/__tests__/RadioGroup.test.tsx
@@ -196,4 +196,97 @@ describe('RadioGroup', () => {
             expect(component).toHaveClass(`g-radio-group_direction_${direction}`);
         },
     );
+
+    describe('form', () => {
+        test('should submit first value by default', async () => {
+            let value;
+            const onSubmit = jest.fn((e) => {
+                e.preventDefault();
+                const formData = new FormData(e.currentTarget);
+                value = [...formData.entries()];
+            });
+            render(
+                <form data-qa="form" onSubmit={onSubmit}>
+                    <RadioGroup name="radio-field" options={options} />
+                    <button type="submit" data-qa="submit">
+                        submit
+                    </button>
+                </form>,
+            );
+            await userEvent.click(screen.getByTestId('submit'));
+            expect(onSubmit).toHaveBeenCalledTimes(1);
+            expect(value).toEqual([['radio-field', 'Value 1']]);
+        });
+
+        test('should submit default value', async () => {
+            let value;
+            const onSubmit = jest.fn((e) => {
+                e.preventDefault();
+                const formData = new FormData(e.currentTarget);
+                value = [...formData.entries()];
+            });
+
+            render(
+                <form data-qa="form" onSubmit={onSubmit}>
+                    <RadioGroup name="radio-field" options={options} defaultValue="Value 2" />
+                    <button type="submit" data-qa="submit">
+                        submit
+                    </button>
+                </form>,
+            );
+            await userEvent.click(screen.getByTestId('submit'));
+            expect(onSubmit).toHaveBeenCalledTimes(1);
+            expect(value).toEqual([['radio-field', 'Value 2']]);
+        });
+
+        test('should submit controlled value', async () => {
+            let value;
+            const onSubmit = jest.fn((e) => {
+                e.preventDefault();
+                const formData = new FormData(e.currentTarget);
+                value = [...formData.entries()];
+            });
+            render(
+                <form data-qa="form" onSubmit={onSubmit}>
+                    <RadioGroup name="radio-field" options={options} value="Value 2" />
+                    <button type="submit" data-qa="submit">
+                        submit
+                    </button>
+                </form>,
+            );
+            await userEvent.click(screen.getByTestId('submit'));
+            expect(onSubmit).toHaveBeenCalledTimes(1);
+            expect(value).toEqual([['radio-field', 'Value 2']]);
+        });
+
+        test('should support form reset', async () => {
+            function Test() {
+                const [value, setValue] = React.useState('Value 2');
+                return (
+                    <form data-qa="form">
+                        <RadioGroup
+                            name="radio-field"
+                            options={options}
+                            value={value}
+                            onUpdate={setValue}
+                        />
+                        <input type="reset" data-qa="reset" />
+                    </form>
+                );
+            }
+
+            render(<Test />);
+            const form = screen.getByTestId('form');
+            expect(form).toHaveFormValues({'radio-field': 'Value 2'});
+
+            await userEvent.tab();
+            await userEvent.keyboard('{ArrowLeft}');
+
+            expect(form).toHaveFormValues({'radio-field': 'Value 3'});
+
+            const button = screen.getByTestId('reset');
+            await userEvent.click(button);
+            expect(form).toHaveFormValues({'radio-field': 'Value 2'});
+        });
+    });
 });
diff --git a/src/components/Select/types.ts b/src/components/Select/types.ts
index 5b2d14e92f..5b84a7dc89 100644
--- a/src/components/Select/types.ts
+++ b/src/components/Select/types.ts
@@ -3,7 +3,7 @@ import type React from 'react';
 import type {PopperPlacement} from '../../hooks/private';
 import type {UseOpenProps} from '../../hooks/useSelect/types';
 import type {InputControlPin, InputControlSize, InputControlView} from '../controls';
-import type {ControlGroupOption, ControlGroupProps, QAProps} from '../types';
+import type {ControlGroupOption, QAProps} from '../types';
 
 import type {Option, OptionGroup} from './tech-components';
 
@@ -58,7 +58,6 @@ export type SelectRenderCounter = (
 ) => React.ReactElement;
 
 export type SelectProps<T = any> = QAProps &
-    Pick<ControlGroupProps, 'name' | 'disabled'> &
     UseOpenProps & {
         onUpdate?: (value: string[]) => void;
         onFilterChange?: (filter: string) => void;
@@ -122,7 +121,9 @@ export type SelectProps<T = any> = QAProps &
         /**Shows selected options count if multiple selection is avalable */
         hasCounter?: boolean;
         title?: string;
+        name?: string;
         form?: string;
+        disabled?: boolean;
     };
 
 export type SelectOption<T = any> = QAProps &
diff --git a/src/components/controls/TextArea/TextArea.tsx b/src/components/controls/TextArea/TextArea.tsx
index 36151ab2d4..ae86d559a5 100644
--- a/src/components/controls/TextArea/TextArea.tsx
+++ b/src/components/controls/TextArea/TextArea.tsx
@@ -3,6 +3,7 @@
 import React from 'react';
 
 import {useControlledState, useForkRef, useUniqId} from '../../../hooks';
+import {useFormResetHandler} from '../../../hooks/private';
 import {block} from '../../utils/cn';
 import {ClearButton, mapTextInputSizeToButtonSize} from '../common';
 import {OuterAdditionalContent} from '../common/OuterAdditionalContent/OuterAdditionalContent';
@@ -71,9 +72,10 @@ export const TextArea = React.forwardRef<HTMLSpanElement, TextAreaProps>(
 
         const [inputValue, setInputValue] = useControlledState(value, defaultValue ?? '', onUpdate);
         const innerControlRef = React.useRef<HTMLTextAreaElement | HTMLInputElement>(null);
+        const fieldRef = useFormResetHandler({initialValue: inputValue, onReset: setInputValue});
+        const handleRef = useForkRef(props.controlRef, innerControlRef, fieldRef);
         const [hasVerticalScrollbar, setHasVerticalScrollbar] = React.useState(false);
         const state = getInputControlState(validationState);
-        const handleRef = useForkRef(props.controlRef, innerControlRef);
         const innerId = useUniqId();
 
         const isErrorMsgVisible = validationState === 'invalid' && Boolean(errorMessage);
diff --git a/src/components/controls/TextArea/__tests__/TextArea.test.tsx b/src/components/controls/TextArea/__tests__/TextArea.test.tsx
index 47aa3f9740..dba43b31dc 100644
--- a/src/components/controls/TextArea/__tests__/TextArea.test.tsx
+++ b/src/components/controls/TextArea/__tests__/TextArea.test.tsx
@@ -152,4 +152,94 @@ describe('TextArea', () => {
             expect(input.getAttribute('autocomplete')).toBe('off');
         });
     });
+
+    describe('form', () => {
+        test('should submit empty value by default', async () => {
+            let value;
+            const onSubmit = jest.fn((e) => {
+                e.preventDefault();
+                const formData = new FormData(e.currentTarget);
+                value = [...formData.entries()];
+            });
+            render(
+                <form data-qa="form" onSubmit={onSubmit}>
+                    <TextArea name="text-field" />
+                    <button type="submit" data-qa="submit">
+                        submit
+                    </button>
+                </form>,
+            );
+            await userEvent.click(screen.getByTestId('submit'));
+            expect(onSubmit).toHaveBeenCalledTimes(1);
+            expect(value).toEqual([['text-field', '']]);
+        });
+
+        test('should submit default value', async () => {
+            let value;
+            const onSubmit = jest.fn((e) => {
+                e.preventDefault();
+                const formData = new FormData(e.currentTarget);
+                value = [...formData.entries()];
+            });
+
+            render(
+                <form data-qa="form" onSubmit={onSubmit}>
+                    <TextArea name="text-field" defaultValue="default value" />
+                    <button type="submit" data-qa="submit">
+                        submit
+                    </button>
+                </form>,
+            );
+            await userEvent.click(screen.getByTestId('submit'));
+            expect(onSubmit).toHaveBeenCalledTimes(1);
+            expect(value).toEqual([['text-field', 'default value']]);
+        });
+
+        test('should submit controlled value', async () => {
+            let value;
+            const onSubmit = jest.fn((e) => {
+                e.preventDefault();
+                const formData = new FormData(e.currentTarget);
+                value = [...formData.entries()];
+            });
+            render(
+                <form data-qa="form" onSubmit={onSubmit}>
+                    <TextArea name="text-field" value="value" />
+                    <button type="submit" data-qa="submit">
+                        submit
+                    </button>
+                </form>,
+            );
+            await userEvent.click(screen.getByTestId('submit'));
+            expect(onSubmit).toHaveBeenCalledTimes(1);
+            expect(value).toEqual([['text-field', 'value']]);
+        });
+
+        test('supports form reset', async () => {
+            function Test() {
+                const [value, setValue] = React.useState('value');
+                return (
+                    <form>
+                        <TextArea name="text-field" value={value} onUpdate={setValue} />
+                        <input type="reset" data-qa="reset" />
+                    </form>
+                );
+            }
+
+            render(<Test />);
+            // eslint-disable-next-line testing-library/no-node-access
+            const inputs = document.querySelectorAll('[name=text-field]');
+            expect(inputs.length).toBe(1);
+            expect(inputs[0]).toHaveValue('value');
+
+            await userEvent.tab();
+            await userEvent.keyboard('text');
+
+            expect(inputs[0]).toHaveValue('text');
+
+            const button = screen.getByTestId('reset');
+            await userEvent.click(button);
+            expect(inputs[0]).toHaveValue('value');
+        });
+    });
 });
diff --git a/src/components/controls/TextInput/TextInput.tsx b/src/components/controls/TextInput/TextInput.tsx
index 4e77b6f48b..44b23f0027 100644
--- a/src/components/controls/TextInput/TextInput.tsx
+++ b/src/components/controls/TextInput/TextInput.tsx
@@ -5,7 +5,7 @@ import React from 'react';
 import {TriangleExclamation} from '@gravity-ui/icons';
 
 import {useControlledState, useForkRef, useUniqId} from '../../../hooks';
-import {useElementSize} from '../../../hooks/private';
+import {useElementSize, useFormResetHandler} from '../../../hooks/private';
 import {Icon} from '../../Icon';
 import {Popover} from '../../Popover';
 import {block} from '../../utils/cn';
@@ -99,7 +99,8 @@ export const TextInput = React.forwardRef<HTMLSpanElement, TextInputProps>(
 
         const [inputValue, setInputValue] = useControlledState(value, defaultValue ?? '', onUpdate);
         const innerControlRef = React.useRef<HTMLTextAreaElement | HTMLInputElement>(null);
-        const handleRef = useForkRef(props.controlRef, innerControlRef);
+        const fieldRef = useFormResetHandler({initialValue: inputValue, onReset: setInputValue});
+        const handleRef = useForkRef(props.controlRef, innerControlRef, fieldRef);
         const labelRef = React.useRef<HTMLLabelElement>(null);
         const startContentRef = React.useRef<HTMLDivElement>(null);
         const state = getInputControlState(validationState);
diff --git a/src/components/controls/TextInput/__tests__/TextInput.input.test.tsx b/src/components/controls/TextInput/__tests__/TextInput.input.test.tsx
index 7f81922e8d..9bd2ae5c04 100644
--- a/src/components/controls/TextInput/__tests__/TextInput.input.test.tsx
+++ b/src/components/controls/TextInput/__tests__/TextInput.input.test.tsx
@@ -286,4 +286,94 @@ describe('TextInput input', () => {
             });
         });
     });
+
+    describe('form', () => {
+        test('should submit empty value by default', async () => {
+            let value;
+            const onSubmit = jest.fn((e) => {
+                e.preventDefault();
+                const formData = new FormData(e.currentTarget);
+                value = [...formData.entries()];
+            });
+            render(
+                <form data-qa="form" onSubmit={onSubmit}>
+                    <TextInput name="text-field" />
+                    <button type="submit" data-qa="submit">
+                        submit
+                    </button>
+                </form>,
+            );
+            await userEvent.click(screen.getByTestId('submit'));
+            expect(onSubmit).toHaveBeenCalledTimes(1);
+            expect(value).toEqual([['text-field', '']]);
+        });
+
+        test('should submit default value', async () => {
+            let value;
+            const onSubmit = jest.fn((e) => {
+                e.preventDefault();
+                const formData = new FormData(e.currentTarget);
+                value = [...formData.entries()];
+            });
+
+            render(
+                <form data-qa="form" onSubmit={onSubmit}>
+                    <TextInput name="text-field" defaultValue="default value" />
+                    <button type="submit" data-qa="submit">
+                        submit
+                    </button>
+                </form>,
+            );
+            await userEvent.click(screen.getByTestId('submit'));
+            expect(onSubmit).toHaveBeenCalledTimes(1);
+            expect(value).toEqual([['text-field', 'default value']]);
+        });
+
+        test('should submit controlled value', async () => {
+            let value;
+            const onSubmit = jest.fn((e) => {
+                e.preventDefault();
+                const formData = new FormData(e.currentTarget);
+                value = [...formData.entries()];
+            });
+            render(
+                <form data-qa="form" onSubmit={onSubmit}>
+                    <TextInput name="text-field" value="value" />
+                    <button type="submit" data-qa="submit">
+                        submit
+                    </button>
+                </form>,
+            );
+            await userEvent.click(screen.getByTestId('submit'));
+            expect(onSubmit).toHaveBeenCalledTimes(1);
+            expect(value).toEqual([['text-field', 'value']]);
+        });
+
+        test('supports form reset', async () => {
+            function Test() {
+                const [value, setValue] = React.useState('value');
+                return (
+                    <form>
+                        <TextInput name="text-field" value={value} onUpdate={setValue} />
+                        <input type="reset" data-qa="reset" />
+                    </form>
+                );
+            }
+
+            render(<Test />);
+            // eslint-disable-next-line testing-library/no-node-access
+            const inputs = document.querySelectorAll('[name=text-field]');
+            expect(inputs.length).toBe(1);
+            expect(inputs[0]).toHaveValue('value');
+
+            await userEvent.tab();
+            await userEvent.keyboard('text');
+
+            expect(inputs[0]).toHaveValue('text');
+
+            const button = screen.getByTestId('reset');
+            await userEvent.click(button);
+            expect(inputs[0]).toHaveValue('value');
+        });
+    });
 });
diff --git a/src/components/types.ts b/src/components/types.ts
index a4ce1ff1ca..af8f0aab5c 100644
--- a/src/components/types.ts
+++ b/src/components/types.ts
@@ -50,9 +50,9 @@ export interface ControlGroupOption<ValueType extends string = string> {
     title?: string;
 }
 
-export interface ControlGroupProps<ValueType extends string = string> {
+export interface ControlGroupProps<ValueType extends string = string> extends AriaLabelingProps {
     name?: string;
-    value?: ValueType;
+    value?: ValueType | null;
     defaultValue?: ValueType;
     onUpdate?: (value: ValueType) => void;
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
@@ -60,8 +60,6 @@ export interface ControlGroupProps<ValueType extends string = string> {
     onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
     disabled?: boolean;
     options?: ControlGroupOption<ValueType>[];
-    'aria-label'?: string;
-    'aria-labelledby'?: string;
 }
 
 export type Key = string | number;
diff --git a/src/hooks/private/useCheckbox/useCheckbox.ts b/src/hooks/private/useCheckbox/useCheckbox.ts
index 62c777d147..89b5de00f8 100644
--- a/src/hooks/private/useCheckbox/useCheckbox.ts
+++ b/src/hooks/private/useCheckbox/useCheckbox.ts
@@ -3,6 +3,7 @@ import React from 'react';
 import {useControlledState, useForkRef} from '../..';
 import type {ControlProps} from '../../../components/types';
 import {eventBroker} from '../../../components/utils/event-broker';
+import {useFormResetHandler} from '../useFormResetHandler';
 
 export type UseCheckboxProps = ControlProps;
 
@@ -36,7 +37,9 @@ export function useCheckbox({
     const inputChecked = indeterminate ? false : checked;
     const inputAriaChecked = indeterminate ? 'mixed' : isChecked;
 
-    const handleRef = useForkRef(controlRef, innerControlRef);
+    const fieldRef = useFormResetHandler({initialValue: isChecked, onReset: setCheckedState});
+
+    const handleRef = useForkRef(controlRef, innerControlRef, fieldRef);
 
     React.useLayoutEffect(() => {
         if (innerControlRef.current) {
diff --git a/src/hooks/private/useRadio/useRadio.ts b/src/hooks/private/useRadio/useRadio.ts
index 93c87b76c0..74df1c9386 100644
--- a/src/hooks/private/useRadio/useRadio.ts
+++ b/src/hooks/private/useRadio/useRadio.ts
@@ -1,8 +1,9 @@
 import React from 'react';
 
-import {useForkRef, useUniqId} from '../..';
+import {useControlledState, useForkRef, useUniqId} from '../..';
 import type {ControlProps} from '../../../components/types';
 import {eventBroker} from '../../../components/utils/event-broker';
+import {useFormResetHandler} from '../useFormResetHandler';
 
 export type UseRadioProps = ControlProps;
 
@@ -27,24 +28,22 @@ export function useRadio({
 }: UseRadioProps): UseRadioResult {
     const controlId = useUniqId();
     const innerControlRef = React.useRef<HTMLInputElement>(null);
-    const [checkedState, setCheckedState] = React.useState(defaultChecked ?? false);
-    const isControlled = typeof checked === 'boolean';
-    const isChecked = isControlled ? checked : checkedState;
+    const [isChecked, setCheckedState] = useControlledState(
+        checked,
+        defaultChecked ?? false,
+        onUpdate,
+    );
+
+    const formFieldRef = useFormResetHandler({initialValue: isChecked, onReset: setCheckedState});
 
-    const handleRef = useForkRef(controlRef, innerControlRef);
+    const handleRef = useForkRef(controlRef, innerControlRef, formFieldRef);
 
     const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        if (!isControlled) {
-            setCheckedState(event.target.checked);
-        }
+        setCheckedState(event.target.checked);
 
         if (onChange) {
             onChange(event);
         }
-
-        if (onUpdate) {
-            onUpdate(event.target.checked);
-        }
     };
 
     const onChangeCapture = (event: React.ChangeEvent<HTMLInputElement>) => {
diff --git a/src/hooks/private/useRadioGroup/useRadioGroup.ts b/src/hooks/private/useRadioGroup/useRadioGroup.ts
index 1c47e563a4..33bc7beb17 100644
--- a/src/hooks/private/useRadioGroup/useRadioGroup.ts
+++ b/src/hooks/private/useRadioGroup/useRadioGroup.ts
@@ -1,7 +1,7 @@
-import React from 'react';
-
-import {useUniqId} from '../..';
+import {useControlledState, useUniqId} from '../..';
 import type {ControlGroupOption, ControlGroupProps} from '../../../components/types';
+import {filterDOMProps} from '../../../components/utils/filterDOMProps';
+import {useFormResetHandler} from '../useFormResetHandler';
 
 interface OptionsProps<ValueType extends string = string>
     extends Omit<
@@ -39,35 +39,33 @@ export function useRadioGroup<ValueType extends string = string>(
     } = props;
 
     const controlId = useUniqId();
-    const [valueState, setValueState] = React.useState(
-        defaultValue ?? options[0]?.value?.toString(),
+    const [currentValue, setValueState] = useControlledState<string | null, ValueType>(
+        value,
+        // FIXME: Do not set defaultValue to first option value
+        defaultValue ?? options[0]?.value ?? null,
+        onUpdate,
     );
-    const isControlled = typeof value !== 'undefined';
-    const currentValue = isControlled ? value : valueState;
 
-    const handleChange = React.useCallback(
-        (event: React.ChangeEvent<HTMLInputElement>) => {
-            if (!isControlled) {
-                setValueState(event.target.value);
-            }
-            if (onChange) {
-                onChange(event);
-            }
-            if (onUpdate) {
-                onUpdate(event.target.value as ValueType);
-            }
-        },
-        [isControlled, onUpdate, onChange],
-    );
+    const fieldRef = useFormResetHandler({
+        initialValue: currentValue as ValueType,
+        onReset: setValueState,
+    });
+
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setValueState(event.target.value as ValueType);
+
+        if (onChange) {
+            onChange(event);
+        }
+    };
 
     const containerProps = {
+        ...filterDOMProps(props, {labelable: true}),
         role: 'radiogroup',
         'aria-disabled': disabled,
-        'aria-label': props['aria-label'],
-        'aria-labelledby': props['aria-labelledby'],
     };
 
-    const optionsProps = options.map((option) => ({
+    const optionsProps: OptionsProps<ValueType>[] = options.map((option) => ({
         name: name || controlId,
         value: option.value,
         content: option.content,
@@ -75,8 +73,10 @@ export function useRadioGroup<ValueType extends string = string>(
         checked: currentValue === String(option.value),
         disabled: disabled || option.disabled,
         onChange: handleChange,
+        // FIXME: onFocus and onBlur should be on the container via useFocusWithin hook
         onFocus: onFocus,
         onBlur: onBlur,
+        ref: fieldRef,
     }));
 
     return {containerProps, optionsProps};