diff --git a/.changeset/quick-bats-remain.md b/.changeset/quick-bats-remain.md
deleted file mode 100644
index 038ad9e2319..00000000000
--- a/.changeset/quick-bats-remain.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-'@primer/styled-react': patch
-'@primer/react': major
----
-
-Update RadioGroup component to no longer support sx, add sx wrapper to @primer/styled-react.
diff --git a/packages/react/src/Banner/Banner.examples.stories.module.css b/packages/react/src/Banner/Banner.examples.stories.module.css
deleted file mode 100644
index 455e6573ae8..00000000000
--- a/packages/react/src/Banner/Banner.examples.stories.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.RadioGroupWithTopMargin {
-  margin-top: var(--base-size-24);
-}
diff --git a/packages/react/src/Banner/Banner.examples.stories.tsx b/packages/react/src/Banner/Banner.examples.stories.tsx
index 74091f67706..f487a3bb6bb 100644
--- a/packages/react/src/Banner/Banner.examples.stories.tsx
+++ b/packages/react/src/Banner/Banner.examples.stories.tsx
@@ -8,7 +8,6 @@ import RadioGroup from '../RadioGroup'
 import Radio from '../Radio'
 import {Button} from '../Button'
 import React from 'react'
-import classes from './Banner.examples.stories.module.css'
 import {useFocus} from '../internal/hooks/useFocus'
 import {PageLayout} from '../PageLayout'
 
@@ -66,11 +65,11 @@ export const WithAnnouncement = () => {
         secondaryAction={<Banner.SecondaryAction>Button</Banner.SecondaryAction>}
       />
       <RadioGroup
+        sx={{marginTop: 4}}
         name="options"
         onChange={selected => {
           setSelected(selected as Choice)
         }}
-        className={classes.RadioGroupWithTopMargin}
       >
         <RadioGroup.Label>Choices</RadioGroup.Label>
         <FormControl>
diff --git a/packages/react/src/CheckboxGroup/CheckboxGroup.dev.stories.module.css b/packages/react/src/CheckboxGroup/CheckboxGroup.dev.stories.module.css
deleted file mode 100644
index b9688c0a2be..00000000000
--- a/packages/react/src/CheckboxGroup/CheckboxGroup.dev.stories.module.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.CheckboxGroup {
-  color: var(--fgColor-default, var(--color-fg-default));
-  /* stylelint-disable-next-line primer/spacing */
-  margin-top: 15px;
-  /* stylelint-disable-next-line primer/spacing */
-  margin-bottom: 15px;
-}
-
-.MutedCaption {
-  color: var(--fgColor-muted);
-  font-size: var(--text-body-size-small);
-  font-weight: var(--text-caption-weight);
-}
-
-.BoldLabel {
-  color: var(--fgColor-default, var(--color-fg-default));
-  font-size: var(--text-body-size-medium);
-  font-weight: var(--base-text-weight-semibold);
-}
diff --git a/packages/react/src/CheckboxGroup/CheckboxGroup.dev.stories.tsx b/packages/react/src/CheckboxGroup/CheckboxGroup.dev.stories.tsx
index 31f306e6311..2a7130df9e4 100644
--- a/packages/react/src/CheckboxGroup/CheckboxGroup.dev.stories.tsx
+++ b/packages/react/src/CheckboxGroup/CheckboxGroup.dev.stories.tsx
@@ -1,6 +1,5 @@
 import type {Meta} from '@storybook/react-vite'
 import {Checkbox, CheckboxGroup, FormControl} from '..'
-import classes from './CheckboxGroup.dev.stories.module.css'
 
 export default {
   title: 'Components/CheckboxGroup/Dev',
@@ -9,9 +8,30 @@ export default {
 } as Meta
 
 export const SxProps = () => (
-  <CheckboxGroup className={classes.CheckboxGroup}>
-    <CheckboxGroup.Caption className={classes.MutedCaption}>Caption</CheckboxGroup.Caption>
-    <CheckboxGroup.Label className={classes.BoldLabel}>Choices</CheckboxGroup.Label>
+  <CheckboxGroup
+    sx={{
+      color: 'var(--fgColor-default, var(--color-fg-default))',
+      my: '15px',
+    }}
+  >
+    <CheckboxGroup.Caption
+      sx={{
+        color: 'fg.muted',
+        fontSize: 0,
+        fontWeight: 400,
+      }}
+    >
+      Caption
+    </CheckboxGroup.Caption>
+    <CheckboxGroup.Label
+      sx={{
+        color: 'var(--fgColor-default, var(--color-fg-default))',
+        fontSize: ['14px'],
+        fontWeight: 600,
+      }}
+    >
+      Choices
+    </CheckboxGroup.Label>
     <FormControl required>
       <Checkbox value="one" defaultChecked />
       <FormControl.Label>Choice one</FormControl.Label>
diff --git a/packages/react/src/RadioGroup/RadioGroup.stories.tsx b/packages/react/src/RadioGroup/RadioGroup.stories.tsx
index 7da9daeea13..bb8d9d5f666 100644
--- a/packages/react/src/RadioGroup/RadioGroup.stories.tsx
+++ b/packages/react/src/RadioGroup/RadioGroup.stories.tsx
@@ -5,7 +5,7 @@ import type {CheckboxOrRadioGroupArgs} from '../utils/form-story-helpers'
 export default {
   title: 'Components/RadioGroup',
   component: RadioGroup,
-  parameters: {controls: {exclude: ['aria-labelledby', 'id', 'onChange']}},
+  parameters: {controls: {exclude: ['aria-labelledby', 'id', 'onChange', 'sx']}},
 } as Meta
 
 export const Playground = ({
diff --git a/packages/react/src/RadioGroup/RadioGroup.tsx b/packages/react/src/RadioGroup/RadioGroup.tsx
index 97822470293..d6de96490e0 100644
--- a/packages/react/src/RadioGroup/RadioGroup.tsx
+++ b/packages/react/src/RadioGroup/RadioGroup.tsx
@@ -7,6 +7,7 @@ import CheckboxOrRadioGroupCaption from '../internal/components/CheckboxOrRadioG
 import CheckboxOrRadioGroupLabel from '../internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupLabel'
 import CheckboxOrRadioGroupValidation from '../internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupValidation'
 import {useRenderForcingRef} from '../hooks'
+import type {SxProp} from '../sx'
 
 type RadioGroupProps = {
   /**
@@ -17,7 +18,8 @@ type RadioGroupProps = {
    * The name used to identify this group of radios
    */
   name: string
-} & CheckboxOrRadioGroupProps
+} & CheckboxOrRadioGroupProps &
+  SxProp
 
 export const RadioGroupContext = createContext<{
   disabled?: boolean
diff --git a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx
index dced8314d37..e69139bb51d 100644
--- a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx
+++ b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx
@@ -7,8 +7,10 @@ import CheckboxOrRadioGroupValidation from './CheckboxOrRadioGroupValidation'
 import CheckboxOrRadioGroupContext from './CheckboxOrRadioGroupContext'
 import VisuallyHidden from '../../../_VisuallyHidden'
 import {useSlots} from '../../../hooks/useSlots'
+import type {SxProp} from '../../../sx'
 import classes from './CheckboxOrRadioGroup.module.css'
 import {clsx} from 'clsx'
+import {BoxWithFallback} from '../BoxWithFallback'
 
 export type CheckboxOrRadioGroupProps = {
   /** Class name for custom styling */
@@ -30,7 +32,7 @@ export type CheckboxOrRadioGroupProps = {
    * If true, the user must make a selection before the owning form can be submitted
    */
   required?: boolean
-}
+} & SxProp
 
 const CheckboxOrRadioGroup: React.FC<React.PropsWithChildren<CheckboxOrRadioGroupProps>> = ({
   'aria-labelledby': ariaLabelledby,
@@ -39,6 +41,7 @@ const CheckboxOrRadioGroup: React.FC<React.PropsWithChildren<CheckboxOrRadioGrou
   id: idProp,
   required = false,
   className,
+  sx,
 }) => {
   const [slots, rest] = useSlots(children, {
     caption: CheckboxOrRadioGroupCaption,
@@ -77,18 +80,24 @@ const CheckboxOrRadioGroup: React.FC<React.PropsWithChildren<CheckboxOrRadioGrou
       }}
     >
       <div>
-        {labelChild ? (
-          <fieldset
-            className={clsx(className, classes.GroupFieldset)}
-            data-validation={validationChild ? '' : undefined}
-            disabled={disabled}
-          >
-            {/*
+        <BoxWithFallback
+          className={clsx(className, classes.GroupFieldset)}
+          data-validation={validationChild ? '' : undefined}
+          {...(labelChild
+            ? {
+                as: 'fieldset',
+                disabled,
+              }
+            : {})}
+          sx={sx}
+        >
+          {labelChild ? (
+            /*
                   Placing the caption text and validation text in the <legend> provides a better user
                   experience for more screenreaders.
 
                   Reference: https://blog.tenon.io/accessible-validation-of-checkbox-and-radiobutton-groups/
-                */}
+                */
             <legend className={classes.GroupLegend} data-legend-visible={isLegendVisible ? '' : undefined}>
               {slots.label}
               {slots.caption}
@@ -96,29 +105,28 @@ const CheckboxOrRadioGroup: React.FC<React.PropsWithChildren<CheckboxOrRadioGrou
                 <VisuallyHidden>{slots.validation.props.children}</VisuallyHidden>
               )}
             </legend>
-
-            <div className={classes.Body}>
-              {React.Children.toArray(rest).filter(child => React.isValidElement(child))}
-            </div>
-          </fieldset>
-        ) : (
-          <div className={clsx(className, classes.GroupFieldset)} data-validation={validationChild ? '' : undefined}>
-            {/*
+          ) : (
+            /*
                   If CheckboxOrRadioGroup.Label wasn't passed as a child, we don't render a <legend>
                   but we still want to render a caption
-                */}
-            {slots.caption}
+                */
+            slots.caption
+          )}
 
-            <div
-              className={classes.Body}
-              aria-labelledby={ariaLabelledby}
-              aria-describedby={[validationMessageId, captionId].filter(Boolean).join(' ')}
-              role="group"
-            >
-              {React.Children.toArray(rest).filter(child => React.isValidElement(child))}
-            </div>
+          <div
+            className={classes.Body}
+            {...(!labelChild
+              ? {
+                  ['aria-labelledby']: ariaLabelledby,
+                  ['aria-describedby']: [validationMessageId, captionId].filter(Boolean).join(' '),
+                  as: 'div',
+                  role: 'group',
+                }
+              : {})}
+          >
+            {React.Children.toArray(rest).filter(child => React.isValidElement(child))}
           </div>
-        )}
+        </BoxWithFallback>
         {validationChild && (
           <ValidationAnimationContainer
             // If we have CheckboxOrRadioGroup.Label as a child, we render a screenreader-accessible validation message in the <legend>
diff --git a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.tsx b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.tsx
index 7b89c12fc0a..bd7735d1fb3 100644
--- a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.tsx
+++ b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.tsx
@@ -1,15 +1,16 @@
 import React from 'react'
 import Text from '../../../Text'
+import type {SxProp} from '../../../sx'
 import CheckboxOrRadioGroupContext from './CheckboxOrRadioGroupContext'
 import classes from './CheckboxOrRadioGroup.module.css'
 import {clsx} from 'clsx'
 
-type CheckboxOrRadioGroupCaptionProps = React.PropsWithChildren<{className?: string}>
+type CheckboxOrRadioGroupCaptionProps = React.PropsWithChildren<SxProp> & {className?: string}
 
-const CheckboxOrRadioGroupCaption: React.FC<CheckboxOrRadioGroupCaptionProps> = ({className, children}) => {
+const CheckboxOrRadioGroupCaption: React.FC<CheckboxOrRadioGroupCaptionProps> = ({className, children, sx}) => {
   const {captionId} = React.useContext(CheckboxOrRadioGroupContext)
   return (
-    <Text className={clsx(className, classes.CheckboxOrRadioGroupCaption)} id={captionId}>
+    <Text className={clsx(className, classes.CheckboxOrRadioGroupCaption)} id={captionId} sx={sx}>
       {children}
     </Text>
   )
diff --git a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupLabel.tsx b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupLabel.tsx
index 8970f1ef61c..674850cda4b 100644
--- a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupLabel.tsx
+++ b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupLabel.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import VisuallyHidden from '../../../_VisuallyHidden'
+import type {SxProp} from '../../../sx'
 import CheckboxOrRadioGroupContext from './CheckboxOrRadioGroupContext'
 import classes from './CheckboxOrRadioGroup.module.css'
 import {Stack} from '../../../Stack'
@@ -12,12 +13,13 @@ export type CheckboxOrRadioGroupLabelProps = {
    * Whether to visually hide the fieldset legend
    */
   visuallyHidden?: boolean
-}
+} & SxProp
 
 const CheckboxOrRadioGroupLabel: React.FC<React.PropsWithChildren<CheckboxOrRadioGroupLabelProps>> = ({
   children,
   className,
   visuallyHidden = false,
+  sx,
 }) => {
   const {required, disabled} = React.useContext(CheckboxOrRadioGroupContext)
 
@@ -27,6 +29,7 @@ const CheckboxOrRadioGroupLabel: React.FC<React.PropsWithChildren<CheckboxOrRadi
       isVisible={!visuallyHidden}
       title={required ? 'required field' : undefined}
       data-label-disabled={disabled ? '' : undefined}
+      sx={sx}
     >
       {required ? (
         <Stack direction="horizontal" gap="none">
diff --git a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupValidation.tsx b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupValidation.tsx
index c42928622be..34cc2c084cd 100644
--- a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupValidation.tsx
+++ b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupValidation.tsx
@@ -1,20 +1,22 @@
 import React from 'react'
 import InputValidation from '../InputValidation'
+import type {SxProp} from '../../../sx'
 import type {FormValidationStatus} from '../../../utils/types/FormValidationStatus'
 import CheckboxOrRadioGroupContext from './CheckboxOrRadioGroupContext'
 
 export type CheckboxOrRadioGroupValidationProps = {
   /** Changes the visual style to match the validation status */
   variant: FormValidationStatus
-}
+} & SxProp
 
 const CheckboxOrRadioGroupValidation: React.FC<React.PropsWithChildren<CheckboxOrRadioGroupValidationProps>> = ({
   children,
   variant,
+  sx,
 }) => {
   const {validationMessageId = ''} = React.useContext(CheckboxOrRadioGroupContext)
   return (
-    <InputValidation validationStatus={variant} id={validationMessageId}>
+    <InputValidation validationStatus={variant} id={validationMessageId} sx={sx}>
       {children}
     </InputValidation>
   )
diff --git a/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap
index 792e77ae236..b4c0bcfd038 100644
--- a/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap
+++ b/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap
@@ -2,7 +2,6 @@
 
 exports[`@primer/styled-react exports 1`] = `
 [
-  "RadioGroup",
   "ToggleSwitch",
   "ActionList",
   "ActionMenu",
@@ -33,6 +32,7 @@ exports[`@primer/styled-react exports 1`] = `
   "PageLayout",
   "Popover",
   "ProgressBar",
+  "RadioGroup",
   "RelativeTime",
   "SegmentedControl",
   "Select",
diff --git a/packages/styled-react/src/index.ts b/packages/styled-react/src/index.ts
index 55d208d16f1..3f2f0ef90e7 100644
--- a/packages/styled-react/src/index.ts
+++ b/packages/styled-react/src/index.ts
@@ -1,9 +1,8 @@
-import {RadioGroup as PrimerRadioGroup, ToggleSwitch as PrimerToggleSwitch} from '@primer/react'
+import {ToggleSwitch as PrimerToggleSwitch} from '@primer/react'
 import {createStyledComponent} from './utils/createStyledComponent'
 
-const RadioGroup: ReturnType<typeof createStyledComponent> = /*#__PURE__*/ createStyledComponent(PrimerRadioGroup)
 const ToggleSwitch: ReturnType<typeof createStyledComponent> = /*#__PURE__*/ createStyledComponent(PrimerToggleSwitch)
-export {RadioGroup, ToggleSwitch}
+export {ToggleSwitch}
 
 export {
   ActionList,
@@ -35,6 +34,7 @@ export {
   PageLayout,
   Popover,
   ProgressBar,
+  RadioGroup,
   RelativeTime,
   SegmentedControl,
   Select,