diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-dark-colorblind-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-dark-colorblind-linux.png
new file mode 100644
index 00000000000..f8d0964c5d7
Binary files /dev/null and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-dark-dimmed-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-dark-dimmed-linux.png
new file mode 100644
index 00000000000..37805b608f0
Binary files /dev/null and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-dark-high-contrast-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..097f4bbc611
Binary files /dev/null and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-dark-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-dark-linux.png
new file mode 100644
index 00000000000..f8d0964c5d7
Binary files /dev/null and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-dark-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-dark-tritanopia-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..f8d0964c5d7
Binary files /dev/null and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-light-colorblind-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-light-colorblind-linux.png
new file mode 100644
index 00000000000..f42efd1779a
Binary files /dev/null and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-light-high-contrast-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-light-high-contrast-linux.png
new file mode 100644
index 00000000000..f132bf21c32
Binary files /dev/null and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-light-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-light-linux.png
new file mode 100644
index 00000000000..f42efd1779a
Binary files /dev/null and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-light-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-light-tritanopia-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-light-tritanopia-linux.png
new file mode 100644
index 00000000000..f42efd1779a
Binary files /dev/null and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithCSS-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-dark-colorblind-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-dark-colorblind-linux.png
new file mode 100644
index 00000000000..df3df41d174
Binary files /dev/null and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-dark-dimmed-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-dark-dimmed-linux.png
new file mode 100644
index 00000000000..7c5497e2b96
Binary files /dev/null and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-dark-high-contrast-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..36a573d7a12
Binary files /dev/null and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-dark-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-dark-linux.png
new file mode 100644
index 00000000000..df3df41d174
Binary files /dev/null and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-dark-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-dark-tritanopia-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..df3df41d174
Binary files /dev/null and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-light-colorblind-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-light-colorblind-linux.png
new file mode 100644
index 00000000000..785dcf53bb9
Binary files /dev/null and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-light-high-contrast-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-light-high-contrast-linux.png
new file mode 100644
index 00000000000..adef3e640fb
Binary files /dev/null and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-light-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-light-linux.png
new file mode 100644
index 00000000000..785dcf53bb9
Binary files /dev/null and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-light-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-light-tritanopia-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-light-tritanopia-linux.png
new file mode 100644
index 00000000000..785dcf53bb9
Binary files /dev/null and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSx-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-colorblind-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-colorblind-linux.png
new file mode 100644
index 00000000000..df3df41d174
Binary files /dev/null and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-dimmed-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-dimmed-linux.png
new file mode 100644
index 00000000000..7c5497e2b96
Binary files /dev/null and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-high-contrast-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..36a573d7a12
Binary files /dev/null and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-linux.png
new file mode 100644
index 00000000000..df3df41d174
Binary files /dev/null and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-tritanopia-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..df3df41d174
Binary files /dev/null and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-light-colorblind-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-light-colorblind-linux.png
new file mode 100644
index 00000000000..785dcf53bb9
Binary files /dev/null and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-light-high-contrast-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-light-high-contrast-linux.png
new file mode 100644
index 00000000000..adef3e640fb
Binary files /dev/null and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-light-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-light-linux.png
new file mode 100644
index 00000000000..785dcf53bb9
Binary files /dev/null and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-light-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-light-tritanopia-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-light-tritanopia-linux.png
new file mode 100644
index 00000000000..785dcf53bb9
Binary files /dev/null and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-Dev-WithSxAndCSS-light-tritanopia-linux.png differ
diff --git a/e2e/components/TextInput.test.ts b/e2e/components/TextInput.test.ts
index dc1af6c6551..34ef7693a0e 100644
--- a/e2e/components/TextInput.test.ts
+++ b/e2e/components/TextInput.test.ts
@@ -338,4 +338,58 @@ test.describe('TextInput', () => {
       })
     }
   })
+
+  test.describe('Dev: With Sx', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-textinput-dev--with-sx',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`TextInput.Dev.WithSx.${theme}.png`)
+        })
+      })
+    }
+  })
+
+  test.describe('Dev: With CSS', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-textinput-dev--with-css',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`TextInput.Dev.WithCSS.${theme}.png`)
+        })
+      })
+    }
+  })
+
+  test.describe('Dev: With Sx and CSS', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-textinput-dev--with-sx-and-css',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`TextInput.Dev.WithSxAndCSS.${theme}.png`)
+        })
+      })
+    }
+  })
 })
diff --git a/packages/react/src/TextInput/TextInput.dev.stories.tsx b/packages/react/src/TextInput/TextInput.dev.stories.tsx
new file mode 100644
index 00000000000..2f73acfd8d3
--- /dev/null
+++ b/packages/react/src/TextInput/TextInput.dev.stories.tsx
@@ -0,0 +1,55 @@
+import React from 'react'
+import type {Meta} from '@storybook/react'
+import {Box, FormControl} from '..'
+import TextInput from '.'
+import {textInputExcludedControlKeys} from '../utils/story-helpers'
+import {FeatureFlags} from '../FeatureFlags'
+
+export default {
+  title: 'Components/TextInput/Dev',
+  component: TextInput,
+  parameters: {controls: {exclude: textInputExcludedControlKeys}},
+} as Meta<React.ComponentProps<typeof TextInput>>
+
+export const WithCSS = () => (
+  <FeatureFlags
+    flags={{
+      primer_react_css_modules_team: true,
+      primer_react_css_modules_staff: true,
+      primer_react_css_modules_ga: true,
+    }}
+  >
+    <Box as="form">
+      <FormControl>
+        <FormControl.Label>Default label</FormControl.Label>
+        <TextInput className="testCustomClassnameBorderColor" />
+      </FormControl>
+    </Box>
+  </FeatureFlags>
+)
+
+export const WithSx = () => (
+  <Box as="form">
+    <FormControl>
+      <FormControl.Label>Default label</FormControl.Label>
+      <TextInput sx={{borderColor: 'red'}} />
+    </FormControl>
+  </Box>
+)
+
+export const WithSxAndCSS = () => (
+  <FeatureFlags
+    flags={{
+      primer_react_css_modules_team: true,
+      primer_react_css_modules_staff: true,
+      primer_react_css_modules_ga: true,
+    }}
+  >
+    <Box as="form">
+      <FormControl>
+        <FormControl.Label>Default label</FormControl.Label>
+        <TextInput sx={{borderColor: 'red'}} className="testCustomClassnameBorderColor" />
+      </FormControl>
+    </Box>
+  </FeatureFlags>
+)