Allow passing value of null to controlled Radio Group

Author: chaance

.changeset/icy-areas-poke.md

@@ -0,0 +1,5 @@
+---
+'@radix-ui/react-radio-group': patch
+---
+
+Allow passing value of `null` to controlled Radio Group when all items are unchecked

apps/storybook/stories/radio-group.stories.tsx

@@ -223,7 +223,7 @@ export const LegacyChromatic = () => {
 
       <h1>Controlled</h1>
       <h2>Unset</h2>
-      <RadioGroup.Root className={styles.root} value="">
+      <RadioGroup.Root className={styles.root} value={null}>
         <RadioGroup.Item className={styles.item} value="1">
           <RadioGroup.Indicator className={styles.indicator} />
         </RadioGroup.Item>

packages/react/radio-group/src/radio-group.tsx

@@ -30,7 +30,7 @@ type RadioGroupContextValue = {
   name?: string;
   required: boolean;
   disabled: boolean;
-  value: string;
+  value: string | null;
   onValueChange(value: string): void;
 };
 
@@ -48,7 +48,7 @@ interface RadioGroupProps extends PrimitiveDivProps {
   orientation?: RovingFocusGroupProps['orientation'];
   loop?: RovingFocusGroupProps['loop'];
   defaultValue?: string;
-  value?: RadioGroupContextValue['value'];
+  value?: string | null;
   onValueChange?: RadioGroupContextValue['onValueChange'];
 }
 
@@ -71,8 +71,8 @@ const RadioGroup = React.forwardRef<RadioGroupElement, RadioGroupProps>(
     const direction = useDirection(dir);
     const [value, setValue] = useControllableState({
       prop: valueProp,
-      defaultProp: defaultValue ?? '',
-      onChange: onValueChange,
+      defaultProp: defaultValue ?? null,
+      onChange: onValueChange as (value: string | null) => void,
       caller: RADIO_GROUP_NAME,
     });