diff --git a/static/app/components/core/radio/radio.mdx b/static/app/components/core/radio/radio.mdx
index 837b6afd82c8..1aa20ae5a591 100644
--- a/static/app/components/core/radio/radio.mdx
+++ b/static/app/components/core/radio/radio.mdx
@@ -35,11 +35,12 @@ Use `<Radio>` for forms and settings where users must choose exactly one option
 
 ## Sizes
 
-`<Radio>` comes in two sizes: `md` (default) and `sm` (small).
+`<Radio>` comes in three sizes: `md` (default), `sm` (small), and `xs` (extra small).
 
 export function SizesDemo() {
   const [md, setMd] = useState(true);
   const [sm, setSm] = useState(true);
+  const [xs, setXs] = useState(true);
   return (
     <Storybook.SideBySide>
       <Flex as="label" align="center" gap="sm">
@@ -50,6 +51,10 @@ export function SizesDemo() {
         Small
         <Radio size="sm" checked={sm} onClick={() => setSm(!sm)} />
       </Flex>
+      <Flex as="label" align="center" gap="sm">
+        Extra small
+        <Radio size="xs" checked={xs} onClick={() => setXs(!xs)} />
+      </Flex>
     </Storybook.SideBySide>
   );
 }
@@ -61,6 +66,7 @@ export function SizesDemo() {
 ```jsx
 <Radio checked={checked} onChange={handleChange} />
 <Radio size="sm" checked={checked} onChange={handleChange} />
+<Radio size="xs" checked={checked} onChange={handleChange} />
 ```
 
 ## States
diff --git a/static/app/components/core/radio/radio.snapshots.tsx b/static/app/components/core/radio/radio.snapshots.tsx
index 6f5bce5c0071..a39829b71747 100644
--- a/static/app/components/core/radio/radio.snapshots.tsx
+++ b/static/app/components/core/radio/radio.snapshots.tsx
@@ -9,7 +9,7 @@ const themes = {light: lightTheme, dark: darkTheme};
 
 describe('Radio', () => {
   describe.each(['light', 'dark'] as const)('theme-%s', themeName => {
-    it.snapshot.each<'sm' | 'md'>(['sm', 'md'])(
+    it.snapshot.each<'xs' | 'sm' | 'md'>(['xs', 'sm', 'md'])(
       'size-%s-unchecked',
       size => (
         <ThemeProvider theme={themes[themeName]}>
@@ -21,7 +21,7 @@ describe('Radio', () => {
       size => ({tags: {size, area: 'core'}})
     );
 
-    it.snapshot.each<'sm' | 'md'>(['sm', 'md'])(
+    it.snapshot.each<'xs' | 'sm' | 'md'>(['xs', 'sm', 'md'])(
       'size-%s-checked',
       size => (
         <ThemeProvider theme={themes[themeName]}>
diff --git a/static/app/components/core/radio/radio.tsx b/static/app/components/core/radio/radio.tsx
index db9fe99c94d1..0d5524821659 100644
--- a/static/app/components/core/radio/radio.tsx
+++ b/static/app/components/core/radio/radio.tsx
@@ -10,10 +10,14 @@ interface RadioProps extends Omit<
 > {
   nativeSize?: React.InputHTMLAttributes<HTMLInputElement>['size'];
   ref?: React.Ref<HTMLInputElement>;
-  size?: 'sm' | 'md';
+  size?: 'xs' | 'sm' | 'md';
 }
 
 const radioConfig = {
+  xs: {
+    outerSize: '12px',
+    innerSize: '6px',
+  },
   sm: {
     outerSize: '20px',
     innerSize: '10px',