[Switch] fix : Hidden input for Switch does not render "over the button"

.yarn/versions/9b826bac.yml

@@ -0,0 +1,5 @@
+releases:
+  "@radix-ui/react-switch": patch
+
+declined:
+  - primitives

packages/react/switch/src/Switch.tsx

@@ -57,44 +57,45 @@ const Switch = React.forwardRef<SwitchElement, SwitchProps>(
 
     return (
       <SwitchProvider scope={__scopeSwitch} checked={checked} disabled={disabled}>
-        <Primitive.button
-          type="button"
-          role="switch"
-          aria-checked={checked}
-          aria-required={required}
-          data-state={getState(checked)}
-          data-disabled={disabled ? '' : undefined}
-          disabled={disabled}
-          value={value}
-          {...switchProps}
-          ref={composedRefs}
-          onClick={composeEventHandlers(props.onClick, (event) => {
-            setChecked((prevChecked) => !prevChecked);
-            if (isFormControl) {
-              hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
-              // if switch is in a form, stop propagation from the button so that we only propagate
-              // one click event (from the input). We propagate changes from an input so that native
-              // form validation works and form events reflect switch updates.
-              if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
-            }
-          })}
-        />
-        {isFormControl && (
-          <BubbleInput
-            control={button}
-            bubbles={!hasConsumerStoppedPropagationRef.current}
-            name={name}
-            value={value}
-            checked={checked}
-            required={required}
+        {/*
+        Wrap with div to prevent input from escaping component bounds
+        */}
+        <div style={{ position: 'relative', display: 'inline-flex' }}>
+          <Primitive.button
+            type="button"
+            role="switch"
+            aria-checked={checked}
+            aria-required={required}
+            data-state={getState(checked)}
+            data-disabled={disabled ? '' : undefined}
             disabled={disabled}
-            form={form}
-            // We transform because the input is absolutely positioned but we have
-            // rendered it **after** the button. This pulls it back to sit on top
-            // of the button.
-            style={{ transform: 'translateX(-100%)' }}
+            value={value}
+            {...switchProps}
+            ref={composedRefs}
+            onClick={composeEventHandlers(props.onClick, (event) => {
+              setChecked((prevChecked) => !prevChecked);
+              if (isFormControl) {
+                hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
+                // if switch is in a form, stop propagation from the button so that we only propagate
+                // one click event (from the input). We propagate changes from an input so that native
+                // form validation works and form events reflect switch updates.
+                if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
+              }
+            })}
           />
-        )}
+          {isFormControl && (
+            <BubbleInput
+              control={button}
+              bubbles={!hasConsumerStoppedPropagationRef.current}
+              name={name}
+              value={value}
+              checked={checked}
+              required={required}
+              disabled={disabled}
+              form={form}
+            />
+          )}
+        </div>
       </SwitchProvider>
     );
   }