From 663f2c6cc825c3defad209479d3698ca03978a20 Mon Sep 17 00:00:00 2001
From: Jay Goss <jaygoss@gmail.com>
Date: Wed, 24 Jun 2026 13:11:14 -0500
Subject: [PATCH] feat(core): Add xs size variant to Radio

Add a 12px outer / 6px inner size to the Radio component alongside the existing sm and md variants. The 6px inner keeps the 1:2 inner-to-outer ratio used by the other sizes.

Cover the new variant in the snapshot tests and component docs.
---
 static/app/components/core/radio/radio.mdx           | 8 +++++++-
 static/app/components/core/radio/radio.snapshots.tsx | 4 ++--
 static/app/components/core/radio/radio.tsx           | 6 +++++-
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/static/app/components/core/radio/radio.mdx b/static/app/components/core/radio/radio.mdx
index 837b6afd82c885..1aa20ae5a59146 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 6f5bce5c0071d9..a39829b71747b6 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 db9fe99c94d11e..0d552482165924 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',