[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.

Author: devxoul

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>
   );
 });

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>

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>
   );

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 {

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>

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 &&

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>
   );
 });