diff --git a/packages/@react-aria/visually-hidden/docs/VisuallyHidden.mdx b/packages/@react-aria/visually-hidden/docs/VisuallyHidden.mdx
index a6f56c7ac46..59a422f7249 100644
--- a/packages/@react-aria/visually-hidden/docs/VisuallyHidden.mdx
+++ b/packages/@react-aria/visually-hidden/docs/VisuallyHidden.mdx
@@ -59,3 +59,17 @@ let {visuallyHiddenProps} = useVisuallyHidden();
 
 <div {...visuallyHiddenProps}>I am hidden</div>
 ```
+
+## Gotchas
+
+VisuallyHidden is positioned absolutely, so it needs a positioned ancestor, otherwise it will be positioned relative to the nearest positioned ancestor which may be the body, causing undesired scroll bars to appear.
+
+```tsx rendered=false
+<label style={{position: 'relative'}}>
+  <VisuallyHidden>
+    <input type="checkbox" />
+  </VisuallyHidden>
+  <span>Subscribe to our newsletter</span>
+</label>
+```
+
diff --git a/packages/react-aria-components/docs/Checkbox.mdx b/packages/react-aria-components/docs/Checkbox.mdx
index 6fe342d7d97..3d874b12be6 100644
--- a/packages/react-aria-components/docs/Checkbox.mdx
+++ b/packages/react-aria-components/docs/Checkbox.mdx
@@ -66,6 +66,8 @@ import {Checkbox} from 'react-aria-components';
   --checkmark-color: var(--highlight-foreground);
 
   display: flex;
+  /* This is needed so the HiddenInput is positioned correctly */
+  position: relative;
   align-items: center;
   gap: 0.571rem;
   font-size: 1.143rem;
diff --git a/packages/react-aria-components/docs/RadioGroup.mdx b/packages/react-aria-components/docs/RadioGroup.mdx
index 31c9e782741..2241e6bbcf9 100644
--- a/packages/react-aria-components/docs/RadioGroup.mdx
+++ b/packages/react-aria-components/docs/RadioGroup.mdx
@@ -76,6 +76,8 @@ import {RadioGroup, Radio, Label} from 'react-aria-components';
 
 .react-aria-Radio {
   display: flex;
+  /* This is needed so the HiddenInput is positioned correctly */
+  position: relative;
   align-items: center;
   gap: 0.571rem;
   font-size: 1.143rem;
diff --git a/packages/react-aria-components/docs/Switch.mdx b/packages/react-aria-components/docs/Switch.mdx
index a6a630746ac..028fbef3f53 100644
--- a/packages/react-aria-components/docs/Switch.mdx
+++ b/packages/react-aria-components/docs/Switch.mdx
@@ -59,6 +59,8 @@ import {Switch} from 'react-aria-components';
 
 .react-aria-Switch {
   display: flex;
+  /* This is needed so the HiddenInput is positioned correctly */
+  position: relative;
   align-items: center;
   gap: 0.571rem;
   font-size: 1.143rem;
diff --git a/packages/react-aria-components/docs/examples/account-menu.mdx b/packages/react-aria-components/docs/examples/account-menu.mdx
index e7fdd950ea8..0fef7a4774a 100644
--- a/packages/react-aria-components/docs/examples/account-menu.mdx
+++ b/packages/react-aria-components/docs/examples/account-menu.mdx
@@ -80,7 +80,7 @@ function MyMenuItem(props: MenuItemProps) {
 
 function MySwitch(props: SwitchProps) {
   return (
-    <Switch className="group flex gap-2 items-center text-gray-800 dark:text-zinc-200 text-base transition">
+    <Switch className="group relative flex gap-2 items-center text-gray-800 dark:text-zinc-200 text-base transition">
       {composeRenderProps(props.children, children => <>
         <div className="flex h-3 w-6 p-[2px] items-center shrink-0 cursor-default rounded-full transition duration-200 ease-in-out shadow-inner border border-transparent bg-gray-400 dark:bg-zinc-400 group-pressed:bg-gray-500 dark:group-pressed:bg-zinc-300 group-selected:bg-gray-700 group-selected:dark:bg-zinc-300 group-selected:forced-colors:bg-[Highlight]! group-selected:group-pressed:bg-gray-800 group-selected:dark:group-pressed:bg-zinc-200 outline outline-0 outline-blue-600 dark:outline-blue-500 forced-colors:outline-[Highlight] outline-offset-2 group-focus-visible:outline-2">
           <div className="h-3 w-3 transform rounded-full bg-white dark:bg-zinc-900 outline outline-1 -outline-offset-1 outline-transparent shadow-sm transition duration-200 ease-in-out translate-x-0 group-selected:translate-x-[100%]" />
diff --git a/packages/react-aria-components/docs/examples/wifi-switch.mdx b/packages/react-aria-components/docs/examples/wifi-switch.mdx
index 841364a43ec..d75169788d8 100644
--- a/packages/react-aria-components/docs/examples/wifi-switch.mdx
+++ b/packages/react-aria-components/docs/examples/wifi-switch.mdx
@@ -38,7 +38,7 @@ import './tailwind.global.css';
 import {Switch} from 'react-aria-components';
 
 <div className="bg-linear-to-r from-yellow-300 to-orange-300 p-12 rounded-lg flex justify-center">
-  <Switch className="group flex gap-2 items-center text-black font-semibold text-lg">
+  <Switch className="group relative flex gap-2 items-center text-black font-semibold text-lg">
     <div className="flex h-[26px] w-[44px] shrink-0 cursor-default rounded-full shadow-inner bg-clip-padding border border-solid border-white/30 p-[3px] box-border transition duration-200 ease-in-out bg-yellow-600 group-pressed:bg-yellow-700 group-selected:bg-amber-800 group-selected:group-pressed:bg-amber-900 outline-hidden group-focus-visible:ring-2 ring-black">
       <span className="h-[18px] w-[18px] transform rounded-full bg-white shadow-sm transition duration-200 ease-in-out translate-x-0 group-selected:translate-x-[100%]" />
     </div>
diff --git a/starters/tailwind/src/Checkbox.tsx b/starters/tailwind/src/Checkbox.tsx
index 707808b10a7..6176486bc6f 100644
--- a/starters/tailwind/src/Checkbox.tsx
+++ b/starters/tailwind/src/Checkbox.tsx
@@ -24,7 +24,7 @@ export function CheckboxGroup(props: CheckboxGroupProps) {
 }
 
 const checkboxStyles = tv({
-  base: 'flex gap-2 items-center group text-sm transition',
+  base: 'flex gap-2 items-center group text-sm transition relative',
   variants: {
     isDisabled: {
       false: 'text-gray-800 dark:text-zinc-200',
diff --git a/starters/tailwind/src/RadioGroup.tsx b/starters/tailwind/src/RadioGroup.tsx
index 55e6852636e..1d47f497666 100644
--- a/starters/tailwind/src/RadioGroup.tsx
+++ b/starters/tailwind/src/RadioGroup.tsx
@@ -43,7 +43,7 @@ const styles = tv({
 
 export function Radio(props: RadioProps) {
   return (
-    <RACRadio {...props} className={composeTailwindRenderProps(props.className, 'flex gap-2 items-center group text-gray-800 disabled:text-gray-300 dark:text-zinc-200 dark:disabled:text-zinc-600 forced-colors:disabled:text-[GrayText] text-sm transition')}>
+    <RACRadio {...props} className={composeTailwindRenderProps(props.className, 'flex relative gap-2 items-center group text-gray-800 disabled:text-gray-300 dark:text-zinc-200 dark:disabled:text-zinc-600 forced-colors:disabled:text-[GrayText] text-sm transition')}>
       {renderProps => <>
         <div className={styles(renderProps)} />
         {props.children}
diff --git a/starters/tailwind/src/Switch.tsx b/starters/tailwind/src/Switch.tsx
index a4d39d40e1e..503c3c92ca0 100644
--- a/starters/tailwind/src/Switch.tsx
+++ b/starters/tailwind/src/Switch.tsx
@@ -39,7 +39,7 @@ const handle = tv({
 
 export function Switch({ children, ...props }: SwitchProps) {
   return (
-    <AriaSwitch {...props} className={composeTailwindRenderProps(props.className, 'group flex gap-2 items-center text-gray-800 disabled:text-gray-300 dark:text-zinc-200 dark:disabled:text-zinc-600 forced-colors:disabled:text-[GrayText] text-sm transition')}>
+    <AriaSwitch {...props} className={composeTailwindRenderProps(props.className, 'group relative flex gap-2 items-center text-gray-800 disabled:text-gray-300 dark:text-zinc-200 dark:disabled:text-zinc-600 forced-colors:disabled:text-[GrayText] text-sm transition')}>
       {(renderProps) => (
         <>
           <div className={track(renderProps)}>