diff --git a/packages/@react-spectrum/s2/src/Checkbox.tsx b/packages/@react-spectrum/s2/src/Checkbox.tsx
index 6d00cf24917..194c240ad13 100644
--- a/packages/@react-spectrum/s2/src/Checkbox.tsx
+++ b/packages/@react-spectrum/s2/src/Checkbox.tsx
@@ -110,6 +110,7 @@ export const box = style<RenderProps>({
 });
 
 export const iconStyles = style({
+  pointerEvents: 'none',
   '--iconPrimary': {
     type: 'fill',
     value: {
diff --git a/packages/dev/s2-docs/pages/react-aria/index.mdx b/packages/dev/s2-docs/pages/react-aria/index.mdx
index f27c63ac710..1fdad7e7f6d 100644
--- a/packages/dev/s2-docs/pages/react-aria/index.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/index.mdx
@@ -29,6 +29,7 @@ import {LinkButton} from '../../src/Link';
 import HomeHeader from './HomeHeader';
 import {Video} from '../../src/Video';
 import videoUrl from 'url:./assets/website.mp4';
+import {SettingsContextProvider} from '../../src/SettingsProvider';
 
 export const section = 'Overview';
 export const title = 'Home';
@@ -75,6 +76,7 @@ export const description = 'Accessible, high quality UI components and hooks for
         )}} />
     </head>
     <body className="m-0" style={{'--s2-container-bg': 'light-dark(white, black)'}}>
+      <SettingsContextProvider>
       <header className="relative header-background isolate pt-20 md:pt-32">
         <HomeHeader />
         <section className="p-4 md:p-6 box-border overflow-clip bg-white dark:bg-zinc-800/80 dark:backdrop-saturate-200 card-shadow w-fit max-w-[calc(100%-40px)] mx-auto rounded-xl flex items-center flex-col xl:flex-row gap-8">
@@ -646,6 +648,7 @@ export const description = 'Accessible, high quality UI components and hooks for
           <li><a href="//www.adobe.com/privacy/ca-rights.html" target="_blank" className="underline text-zinc-500 dark:text-zinc-400">Do not sell my personal information</a></li>
         </ul>
       </footer>
+      </SettingsContextProvider>
     </body>
   </Provider>
 </RouterWrapperServer>
diff --git a/starters/tailwind/src/Checkbox.tsx b/starters/tailwind/src/Checkbox.tsx
index fe4afef5027..7e226febc09 100644
--- a/starters/tailwind/src/Checkbox.tsx
+++ b/starters/tailwind/src/Checkbox.tsx
@@ -32,7 +32,7 @@ const boxStyles = tv({
   }
 });
 
-const iconStyles = 'w-3.5 h-3.5 text-white group-disabled:text-neutral-400 dark:text-neutral-900 dark:group-disabled:text-neutral-600 forced-colors:text-[HighlightText]';
+const iconStyles = 'w-3.5 h-3.5 text-white group-disabled:text-neutral-400 dark:text-neutral-900 dark:group-disabled:text-neutral-600 forced-colors:text-[HighlightText] pointer-events-none';
 
 export function Checkbox(props: CheckboxProps) {
   return (
