diff --git a/core/api.txt b/core/api.txt
index 47b1307e5a..d91418ede8 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -1364,7 +1364,7 @@ ion-textarea,prop,autocapitalize,string,'none',false,false
 ion-textarea,prop,autofocus,boolean,false,false,false
 ion-textarea,prop,clearOnEdit,boolean,false,false,false
 ion-textarea,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
-ion-textarea,prop,cols,number | undefined,undefined,false,false
+ion-textarea,prop,cols,number | undefined,undefined,false,true
 ion-textarea,prop,counter,boolean,false,false,false
 ion-textarea,prop,counterFormatter,((inputLength: number, maxLength: number) => string) | undefined,undefined,false,false
 ion-textarea,prop,debounce,number | undefined,undefined,false,false
diff --git a/core/src/components/textarea/test/cols/textarea.e2e.ts b/core/src/components/textarea/test/cols/textarea.e2e.ts
new file mode 100644
index 0000000000..574f7ba0fe
--- /dev/null
+++ b/core/src/components/textarea/test/cols/textarea.e2e.ts
@@ -0,0 +1,43 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('textarea: cols'), () => {
+    test('should respect cols when autogrow is not set', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          ion-textarea {
+            border: 1px solid red;
+          }
+        </style>
+        <div id="container" style="width: 300px; margin: 20px;">
+          <ion-textarea label="Textarea" cols="5" value="Lorem Ipsum"></ion-textarea>
+        </div>
+      `,
+        config
+      );
+
+      const container = page.locator('#container');
+      await expect(container).toHaveScreenshot(screenshot('textarea-cols'));
+    });
+    test('should ignore cols when autogrow is set', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          ion-textarea {
+            border: 1px solid red;
+          }
+        </style>
+        <div id="container" style="width: 300px; margin: 20px;">
+          <ion-textarea label="Textarea" cols="5" auto-grow="true" value="Lorem Ipsum"></ion-textarea>
+        </div>
+      `,
+        config
+      );
+
+      const container = page.locator('#container');
+      await expect(container).toHaveScreenshot(screenshot('textarea-cols-autogrow'));
+    });
+  });
+});
diff --git a/core/src/components/textarea/test/cols/textarea.e2e.ts-snapshots/textarea-cols-autogrow-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/cols/textarea.e2e.ts-snapshots/textarea-cols-autogrow-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..de8d1b5f8f
Binary files /dev/null and b/core/src/components/textarea/test/cols/textarea.e2e.ts-snapshots/textarea-cols-autogrow-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/cols/textarea.e2e.ts-snapshots/textarea-cols-autogrow-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/cols/textarea.e2e.ts-snapshots/textarea-cols-autogrow-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..70eb06187d
Binary files /dev/null and b/core/src/components/textarea/test/cols/textarea.e2e.ts-snapshots/textarea-cols-autogrow-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/cols/textarea.e2e.ts-snapshots/textarea-cols-autogrow-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/cols/textarea.e2e.ts-snapshots/textarea-cols-autogrow-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..2b5d0a0ff7
Binary files /dev/null and b/core/src/components/textarea/test/cols/textarea.e2e.ts-snapshots/textarea-cols-autogrow-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/cols/textarea.e2e.ts-snapshots/textarea-cols-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/cols/textarea.e2e.ts-snapshots/textarea-cols-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..4ba8dfd503
Binary files /dev/null and b/core/src/components/textarea/test/cols/textarea.e2e.ts-snapshots/textarea-cols-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/cols/textarea.e2e.ts-snapshots/textarea-cols-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/cols/textarea.e2e.ts-snapshots/textarea-cols-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..35538aaf06
Binary files /dev/null and b/core/src/components/textarea/test/cols/textarea.e2e.ts-snapshots/textarea-cols-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/cols/textarea.e2e.ts-snapshots/textarea-cols-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/cols/textarea.e2e.ts-snapshots/textarea-cols-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..d5308090bf
Binary files /dev/null and b/core/src/components/textarea/test/cols/textarea.e2e.ts-snapshots/textarea-cols-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/textarea.scss b/core/src/components/textarea/textarea.scss
index f9a60a0125..6e7299ffa4 100644
--- a/core/src/components/textarea/textarea.scss
+++ b/core/src/components/textarea/textarea.scss
@@ -67,6 +67,22 @@
   box-sizing: border-box;
 }
 
+/**
+ * When the cols property is set we should
+ * respect that width instead of defaulting
+ * to taking up the entire line.
+ * Requires both the cols and autoGrow
+ * properties to be reflected as attributes
+ * on the host.
+ *
+ * cols does not work with autoGrow because
+ * autoGrow would prevent line breaks from naturally
+ * occurring until the textarea takes up the entire line width.
+ */
+:host([cols]:not([auto-grow])) {
+  width: fit-content;
+}
+
 // TODO: FW-2876 - Remove this selector
 :host(.legacy-textarea) {
   flex: 1;
diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx
index e2bb7e1a57..b78121d97d 100644
--- a/core/src/components/textarea/textarea.tsx
+++ b/core/src/components/textarea/textarea.tsx
@@ -180,7 +180,7 @@ export class Textarea implements ComponentInterface {
   /**
    * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.
    */
-  @Prop() cols?: number;
+  @Prop({ reflect: true }) cols?: number;
 
   /**
    * The number of visible text lines for the control.