diff --git a/.changeset/giant-maps-enjoy.md b/.changeset/giant-maps-enjoy.md
new file mode 100644
index 00000000000..3f051d02564
--- /dev/null
+++ b/.changeset/giant-maps-enjoy.md
@@ -0,0 +1,5 @@
+---
+'@kaizen/components': patch
+---
+
+TextArea: no longer forced into controlled mode under the hood, allowing value manipulation via JS if needed
diff --git a/packages/components/src/TextArea/TextArea.tsx b/packages/components/src/TextArea/TextArea.tsx
index ba07c0c2e1b..16206d73fbf 100644
--- a/packages/components/src/TextArea/TextArea.tsx
+++ b/packages/components/src/TextArea/TextArea.tsx
@@ -33,17 +33,18 @@ export const TextArea = ({
 }: TextAreaProps): JSX.Element => {
   const [internalValue, setInternalValue] = useState<
     string | number | readonly string[] | undefined
-  >(autogrow && !value ? defaultValue : undefined)
-  // ^ holds an internal state of the value so that autogrow can still work with uncontrolled textareas
-  // essentially forces the textarea into an (interally) controlled mode if autogrow is true and mode is uncontrolled
+  >(defaultValue)
+  // ^holds an internal state of the value, used for the autogrow feature if uncontrolled (no `value` provided)
 
-  const controlledValue = value ?? internalValue
   const fallbackRef = useRef(null)
   const textAreaRef = propsTextAreaRef ?? fallbackRef
 
   const onChange = (event: React.ChangeEvent<HTMLTextAreaElement>): void => {
     propsOnChange?.(event)
-    setInternalValue(event.target.value)
+
+    if (!value && autogrow) {
+      setInternalValue(event.target.value)
+    }
   }
 
   return (
@@ -51,7 +52,7 @@ export const TextArea = ({
       className={classnames(styles.wrapper, {
         [styles.wrapperAutogrow]: autogrow,
       })}
-      data-value={autogrow ? controlledValue : undefined}
+      data-value={autogrow ? (value ?? internalValue) : undefined}
     >
       <textarea
         className={classnames(
@@ -65,8 +66,8 @@ export const TextArea = ({
         )}
         rows={rows}
         onChange={onChange}
-        value={controlledValue}
-        defaultValue={controlledValue ? undefined : defaultValue}
+        value={value}
+        defaultValue={value ? undefined : defaultValue}
         // ^ React throws a warning if you specify both a value and a defaultValue
         ref={textAreaRef}
         disabled={disabled}
diff --git a/packages/components/src/TextArea/_docs/TextArea.stickersheet.stories.tsx b/packages/components/src/TextArea/_docs/TextArea.stickersheet.stories.tsx
index deb6822595a..ab0b10b1c1d 100644
--- a/packages/components/src/TextArea/_docs/TextArea.stickersheet.stories.tsx
+++ b/packages/components/src/TextArea/_docs/TextArea.stickersheet.stories.tsx
@@ -24,20 +24,29 @@ export default {
 
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
-    <StickerSheet isReversed={isReversed} headers={['Default', 'Hover', 'Active', 'Focus']}>
-      <StickerSheet.Row header="Enabled">
-        <TextArea reversed={isReversed} />
-        <TextArea reversed={isReversed} data-sb-pseudo-styles="hover" />
-        <TextArea reversed={isReversed} data-sb-pseudo-styles="active" />
-        <TextArea reversed={isReversed} data-sb-pseudo-styles="focus" />
-      </StickerSheet.Row>
-      <StickerSheet.Row header="Disabled">
-        <TextArea reversed={isReversed} disabled />
-        <TextArea reversed={isReversed} disabled data-sb-pseudo-styles="hover" />
-        <TextArea reversed={isReversed} disabled data-sb-pseudo-styles="active" />
-        <TextArea reversed={isReversed} disabled data-sb-pseudo-styles="focus" />
-      </StickerSheet.Row>
-    </StickerSheet>
+    <>
+      <StickerSheet isReversed={isReversed} headers={['Default', 'Hover', 'Active', 'Focus']}>
+        <StickerSheet.Row header="Enabled">
+          <TextArea reversed={isReversed} />
+          <TextArea reversed={isReversed} data-sb-pseudo-styles="hover" />
+          <TextArea reversed={isReversed} data-sb-pseudo-styles="active" />
+          <TextArea reversed={isReversed} data-sb-pseudo-styles="focus" />
+        </StickerSheet.Row>
+        <StickerSheet.Row header="Disabled">
+          <TextArea reversed={isReversed} disabled />
+          <TextArea reversed={isReversed} disabled data-sb-pseudo-styles="hover" />
+          <TextArea reversed={isReversed} disabled data-sb-pseudo-styles="active" />
+          <TextArea reversed={isReversed} disabled data-sb-pseudo-styles="focus" />
+        </StickerSheet.Row>
+      </StickerSheet>
+      <StickerSheet title="Autogrow">
+        <TextArea
+          rows={1}
+          value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mattis nisi sit amet consectetur ultricies. Vestibulum porta arcu vitae erat egestas pulvinar. Proin tincidunt mi ultricies risus ultrices semper. Donec consequat, mi at tincidunt mattis, felis metus semper metus, a imperdiet justo odio ac elit. Nulla et lacinia enim. Donec placerat, arcu a hendrerit iaculis, massa ante venenatis urna, vitae vestibulum massa orci et erat. Sed in cursus arcu. Fusce fringilla urna tincidunt risus sodales mollis. Ut sit amet mi vitae justo aliquam congue eget eu nisl. Mauris sit amet dolor fermentum, rutrum orci eget, feugiat mi. Etiam feugiat auctor augue, non volutpat nisi aliquet non. Praesent dignissim, lacus id iaculis porttitor, purus libero fermentum urna, in faucibus massa enim sed dui. Maecenas et nisi in nulla condimentum dictum. Maecenas tincidunt turpis non consequat pharetra. Suspendisse in auctor erat, vel ullamcorper elit. Nullam rutrum pharetra turpis, id luctus nisi sollicitudin ac. Maecenas sodales malesuada orci. Integer ultrices, nisi non blandit commodo, turpis enim iaculis ante, vel blandit diam sapien eget justo. Mauris scelerisque euismod quam, nec accumsan lorem venenatis vel. Sed rhoncus purus turpis, vel efficitur metus placerat et."
+          autogrow
+        />
+      </StickerSheet>
+    </>
   ),
   parameters: {
     pseudo: {