From 591cc39fc86fc8eafdc84f817309435eeae4b811 Mon Sep 17 00:00:00 2001
From: Jeon Suyeol <devxoul@gmail.com>
Date: Mon, 30 Mar 2026 15:43:46 +0900
Subject: [PATCH] [switch][checkbox][radio][select][combobox] Add
 suppressHydrationWarning to hidden inputs

Browser extensions (e.g. Dark Reader) can modify the inline styles
of hidden inputs before React hydrates, causing hydration mismatch
warnings. This is already handled in Slider, Tabs, and NumberField
but was missing from Switch, Checkbox, Radio, Select, and Combobox.
---
 packages/react/src/checkbox/root/CheckboxRoot.tsx        | 2 +-
 packages/react/src/combobox/root/AriaCombobox.tsx        | 1 +
 packages/react/src/number-field/root/NumberFieldRoot.tsx | 1 +
 packages/react/src/radio/root/RadioRoot.tsx              | 2 +-
 packages/react/src/select/root/SelectRoot.tsx            | 1 +
 packages/react/src/slider/thumb/SliderThumb.tsx          | 2 +-
 packages/react/src/switch/root/SwitchRoot.tsx            | 2 +-
 7 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/checkbox/root/CheckboxRoot.tsx b/packages/react/src/checkbox/root/CheckboxRoot.tsx
index 696cbee9529..2167883b8a5 100644
--- a/packages/react/src/checkbox/root/CheckboxRoot.tsx
+++ b/packages/react/src/checkbox/root/CheckboxRoot.tsx
@@ -360,7 +360,7 @@ export const CheckboxRoot = React.forwardRef(function CheckboxRoot(
       {!checked && !groupContext && name && !parent && uncheckedValue !== undefined && (
         <input type="hidden" form={form} name={name} value={uncheckedValue} />
       )}
-      <input {...inputProps} />
+      <input {...inputProps} suppressHydrationWarning />
     </CheckboxRootContext.Provider>
   );
 });
diff --git a/packages/react/src/combobox/root/AriaCombobox.tsx b/packages/react/src/combobox/root/AriaCombobox.tsx
index 37a2ab8e7a4..771d9f5b9d7 100644
--- a/packages/react/src/combobox/root/AriaCombobox.tsx
+++ b/packages/react/src/combobox/root/AriaCombobox.tsx
@@ -1280,6 +1280,7 @@ export function AriaCombobox<Value = any, Mode extends SelectionMode = 'none'>(
         style={hiddenInputName ? visuallyHiddenInput : visuallyHidden}
         tabIndex={-1}
         aria-hidden
+        suppressHydrationWarning
       />
       {hiddenInputs}
     </React.Fragment>
diff --git a/packages/react/src/number-field/root/NumberFieldRoot.tsx b/packages/react/src/number-field/root/NumberFieldRoot.tsx
index a534097bafa..7c0a5290e49 100644
--- a/packages/react/src/number-field/root/NumberFieldRoot.tsx
+++ b/packages/react/src/number-field/root/NumberFieldRoot.tsx
@@ -499,6 +499,7 @@ export const NumberFieldRoot = React.forwardRef(function NumberFieldRoot(
         aria-hidden
         tabIndex={-1}
         style={name ? visuallyHiddenInput : visuallyHidden}
+        suppressHydrationWarning
       />
     </NumberFieldRootContext.Provider>
   );
diff --git a/packages/react/src/radio/root/RadioRoot.tsx b/packages/react/src/radio/root/RadioRoot.tsx
index d83861a3164..c2cc9fa7d15 100644
--- a/packages/react/src/radio/root/RadioRoot.tsx
+++ b/packages/react/src/radio/root/RadioRoot.tsx
@@ -271,7 +271,7 @@ export const RadioRoot = React.forwardRef(function RadioRoot<Value>(
       ) : (
         element
       )}
-      <input {...inputProps} />
+      <input {...inputProps} suppressHydrationWarning />
     </RadioRootContext.Provider>
   );
 }) as {
diff --git a/packages/react/src/select/root/SelectRoot.tsx b/packages/react/src/select/root/SelectRoot.tsx
index 76bb0987369..bbcd1cb9534 100644
--- a/packages/react/src/select/root/SelectRoot.tsx
+++ b/packages/react/src/select/root/SelectRoot.tsx
@@ -580,6 +580,7 @@ export function SelectRoot<Value, Multiple extends boolean | undefined = false>(
           style={name ? visuallyHiddenInput : visuallyHidden}
           tabIndex={-1}
           aria-hidden
+          suppressHydrationWarning
         />
         {hiddenInputs}
       </SelectFloatingContext.Provider>
diff --git a/packages/react/src/slider/thumb/SliderThumb.tsx b/packages/react/src/slider/thumb/SliderThumb.tsx
index c817c3ae735..f71e95990e1 100644
--- a/packages/react/src/slider/thumb/SliderThumb.tsx
+++ b/packages/react/src/slider/thumb/SliderThumb.tsx
@@ -475,7 +475,7 @@ export const SliderThumb = React.forwardRef(function SliderThumb(
         children: (
           <React.Fragment>
             {childrenProp}
-            <input ref={mergedInputRef} {...inputProps} />
+            <input ref={mergedInputRef} {...inputProps} suppressHydrationWarning />
             {inset &&
               !isMounted &&
               renderBeforeHydration &&
diff --git a/packages/react/src/switch/root/SwitchRoot.tsx b/packages/react/src/switch/root/SwitchRoot.tsx
index ade8eea25b4..487559e05ff 100644
--- a/packages/react/src/switch/root/SwitchRoot.tsx
+++ b/packages/react/src/switch/root/SwitchRoot.tsx
@@ -261,7 +261,7 @@ export const SwitchRoot = React.forwardRef(function SwitchRoot(
       {!checked && name && uncheckedValue !== undefined && (
         <input type="hidden" form={form} name={name} value={uncheckedValue} />
       )}
-      <input {...inputProps} />
+      <input {...inputProps} suppressHydrationWarning />
     </SwitchRootContext.Provider>
   );
 });