Add disableNativeInput?: boolean prop to all components that render hidden inputs

.yarn/versions/9b6bc09d.yml

@@ -0,0 +1,10 @@
+releases:
+  "@radix-ui/react-checkbox": patch
+  "@radix-ui/react-radio-group": patch
+  "@radix-ui/react-select": patch
+  "@radix-ui/react-slider": patch
+  "@radix-ui/react-switch": patch
+  radix-ui: patch
+
+declined:
+  - primitives

packages/react/checkbox/src/checkbox.tsx

@@ -35,6 +35,7 @@ interface CheckboxProps extends Omit<PrimitiveButtonProps, 'checked' | 'defaultC
   checked?: CheckedState;
   defaultChecked?: CheckedState;
   required?: boolean;
+  disableNativeInput?: boolean;
   onCheckedChange?(checked: CheckedState): void;
 }
 
@@ -50,13 +51,18 @@ const Checkbox = React.forwardRef<CheckboxElement, CheckboxProps>(
       value = 'on',
       onCheckedChange,
       form,
+      disableNativeInput,
       ...checkboxProps
     } = props;
     const [button, setButton] = React.useState<HTMLButtonElement | null>(null);
     const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node));
     const hasConsumerStoppedPropagationRef = React.useRef(false);
-    // We set this to true by default so that events bubble to forms without JS (SSR)
-    const isFormControl = button ? form || !!button.closest('form') : true;
+    // We set this to true by default so that events bubble to forms without JS (SSR).
+    const isFormControl = disableNativeInput
+      ? false
+      : button
+        ? form || !!button.closest('form')
+        : true;
     const [checked = false, setChecked] = useControllableState({
       prop: checkedProp,
       defaultProp: defaultChecked,

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

@@ -26,6 +26,7 @@ type PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.butt
 interface RadioProps extends PrimitiveButtonProps {
   checked?: boolean;
   required?: boolean;
+  disableNativeInput?: boolean;
   onCheck?(): void;
 }
 
@@ -40,13 +41,18 @@ const Radio = React.forwardRef<RadioElement, RadioProps>(
       value = 'on',
       onCheck,
       form,
+      disableNativeInput,
       ...radioProps
     } = props;
     const [button, setButton] = React.useState<HTMLButtonElement | null>(null);
     const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node));
     const hasConsumerStoppedPropagationRef = React.useRef(false);
     // We set this to true by default so that events bubble to forms without JS (SSR)
-    const isFormControl = button ? form || !!button.closest('form') : true;
+    const isFormControl = disableNativeInput
+      ? false
+      : button
+        ? form || !!button.closest('form')
+        : true;
 
     return (
       <RadioProvider scope={__scopeRadio} checked={checked} disabled={disabled}>

packages/react/select/src/select.tsx

@@ -92,6 +92,7 @@ interface SelectProps {
   disabled?: boolean;
   required?: boolean;
   form?: string;
+  disableNativeInput?: boolean;
 }
 
 const Select: React.FC<SelectProps> = (props: ScopedProps<SelectProps>) => {
@@ -110,6 +111,7 @@ const Select: React.FC<SelectProps> = (props: ScopedProps<SelectProps>) => {
     disabled,
     required,
     form,
+    disableNativeInput,
   } = props;
   const popperScope = usePopperScope(__scopeSelect);
   const [trigger, setTrigger] = React.useState<SelectTriggerElement | null>(null);
@@ -129,7 +131,11 @@ const Select: React.FC<SelectProps> = (props: ScopedProps<SelectProps>) => {
   const triggerPointerDownPosRef = React.useRef<{ x: number; y: number } | null>(null);
 
   // We set this to true by default so that events bubble to forms without JS (SSR)
-  const isFormControl = trigger ? form || !!trigger.closest('form') : true;
+  const isFormControl = disableNativeInput
+    ? false
+    : trigger
+      ? form || !!trigger.closest('form')
+      : true;
   const [nativeOptionsSet, setNativeOptionsSet] = React.useState(new Set<NativeOption>());
 
   // The native `select` only associates the correct default value if the corresponding

packages/react/slider/src/slider.tsx

@@ -550,17 +550,22 @@ type SliderThumbImplElement = React.ElementRef<typeof Primitive.span>;
 interface SliderThumbImplProps extends PrimitiveSpanProps {
   index: number;
   name?: string;
+  disableNativeInput?: boolean;
 }
 
 const SliderThumbImpl = React.forwardRef<SliderThumbImplElement, SliderThumbImplProps>(
   (props: ScopedProps<SliderThumbImplProps>, forwardedRef) => {
-    const { __scopeSlider, index, name, ...thumbProps } = props;
+    const { __scopeSlider, index, name, disableNativeInput, ...thumbProps } = props;
     const context = useSliderContext(THUMB_NAME, __scopeSlider);
     const orientation = useSliderOrientationContext(THUMB_NAME, __scopeSlider);
     const [thumb, setThumb] = React.useState<HTMLSpanElement | null>(null);
     const composedRefs = useComposedRefs(forwardedRef, (node) => setThumb(node));
     // We set this to true by default so that events bubble to forms without JS (SSR)
-    const isFormControl = thumb ? context.form || !!thumb.closest('form') : true;
+    const isFormControl = disableNativeInput
+      ? false
+      : thumb
+        ? context.form || !!thumb.closest('form')
+        : true;
     const size = useSize(thumb);
     // We cast because index could be `-1` which would return undefined
     const value = context.values[index] as number | undefined;

packages/react/switch/src/switch.tsx

@@ -27,6 +27,7 @@ interface SwitchProps extends PrimitiveButtonProps {
   checked?: boolean;
   defaultChecked?: boolean;
   required?: boolean;
+  disableNativeInput?: boolean;
   onCheckedChange?(checked: boolean): void;
 }
 
@@ -42,13 +43,18 @@ const Switch = React.forwardRef<SwitchElement, SwitchProps>(
       value = 'on',
       onCheckedChange,
       form,
+      disableNativeInput,
       ...switchProps
     } = props;
     const [button, setButton] = React.useState<HTMLButtonElement | null>(null);
     const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node));
     const hasConsumerStoppedPropagationRef = React.useRef(false);
     // We set this to true by default so that events bubble to forms without JS (SSR)
-    const isFormControl = button ? form || !!button.closest('form') : true;
+    const isFormControl = disableNativeInput
+      ? false
+      : button
+        ? form || !!button.closest('form')
+        : true;
     const [checked = false, setChecked] = useControllableState({
       prop: checkedProp,
       defaultProp: defaultChecked,