ionic-team · rugoncalves · Feb 16, 2026 · Feb 16, 2026 · Feb 16, 2026 · Feb 16, 2026
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Textarea - Rows</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(250px, 1fr));
+        grid-row-gap: 20px;
+        grid-column-gap: 20px;
+      }
+
+      h2 {
+        font-size: 12px;
+        font-weight: normal;
+        color: #6f7378;
+        margin-top: 10px;
+      }
+
+      @media screen and (max-width: 800px) {
+        .grid {
+          grid-template-columns: 1fr;
+          padding: 0;
+        }
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Textarea - Rows</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content" class="ion-padding">
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Rows: 3</h2>
+            <ion-textarea
+              rows="3"
+              label="Comments"
+              label-placement="stacked"
+              helper-text="rows=3, label-placement=stacked"
+              value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
+            ></ion-textarea>
+          </div>
+
+          <div class="grid-item">
+            <h2>Rows: 2</h2>
+            <ion-textarea
+              rows="2"
+              label="Text Area"
+              label-placement="stacked"
+              helper-text="rows=2, label-placement=stacked"
+              value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
+            ></ion-textarea>
+          </div>
+
+          <div class="grid-item">
+            <h2>Rows: 5</h2>
+            <ion-textarea
+              rows="5"
+              label="Text Area"
+              label-placement="stacked"
+              helper-text="rows=5, label-placement=stacked"
+              value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
+            ></ion-textarea>
+          </div>
+
+          <div class="grid-item">
+            <h2>Rows: 8</h2>
+            <ion-textarea
+              rows="8"
+              label="Text Area"
+              label-placement="stacked"
+              helper-text="rows=8, label-placement=stacked"
+              value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
+            ></ion-textarea>
+          </div>
+
+          <div class="grid-item">
+            <h2>Rows: 3, Size Small</h2>
+            <ion-textarea
+              rows="3"
+              size="small"
+              label="Small Size"
+              label-placement="stacked"
+              helper-text="rows=3, size=small, label-placement=stacked"
+              value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
+            ></ion-textarea>
+          </div>
+
+          <div class="grid-item">
+            <h2>Rows: 3, Size Medium</h2>
+            <ion-textarea
+              rows="3"
+              size="medium"
+              label="Medium Size"
+              label-placement="stacked"
+              helper-text="rows=3, size=medium, label-placement=stacked"
+              value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
+            ></ion-textarea>
+          </div>
+
+          <div class="grid-item">
+            <h2>Rows: 3, Size Large</h2>
+            <ion-textarea
+              rows="3"
+              size="large"
+              label="Large Size"
+              label-placement="stacked"
+              helper-text="rows=3, size=large, label-placement=stacked"
+              value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
+            ></ion-textarea>
+          </div>
+
+          <div class="grid-item">
+            <h2>Rows: 3, Auto-grow</h2>
+            <ion-textarea
+              rows="3"
+              auto-grow="true"
+              label="Comments"
+              label-placement="stacked"
+              helper-text="rows=3, auto-grow=true, label-placement=stacked"
+              value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
+            ></ion-textarea>
+          </div>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
@@ -0,0 +1,207 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * Rows attribute is only available in the Ionic theme.
+ * When set, it increases the container min-height to accommodate the number of rows.
+ */
+configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('textarea: rows'), () => {
+    test('should respect rows attribute and set min-height', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-textarea
+          rows="3"
+          label="Comments"
+          label-placement="stacked"
+          helper-text="rows=3, label-placement=stacked"
+          value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
+        ></ion-textarea>
+      `,
+        config
+      );
+
+      const textarea = page.locator('ion-textarea');
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-rows-3`));
+    });
+
+    test('should respect rows attribute with different values', async ({ page }) => {
+      await page.setContent(
+        `
+        <div id="container" style="display: flex; flex-direction: column; gap: 20px;">
+          <ion-textarea
+            rows="1"
+            label="Small"
+            label-placement="stacked"
+            helper-text="rows=1, label-placement=stacked"
+            value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
+          ></ion-textarea>
+          <ion-textarea
+            rows="1"
+            label="Medium"
+            label-placement="stacked"
+            helper-text="rows=1, label-placement=stacked"
+            value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
+          ></ion-textarea>
+          <ion-textarea
+            rows="1"
+            label="Large"
+            label-placement="stacked"
+            helper-text="rows=1, label-placement=stacked"
+            value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
+          ></ion-textarea>
+          <ion-textarea
+            rows="3"
+            label="Small"
+            label-placement="stacked"
+            helper-text="rows=3, label-placement=stacked"
+            value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
+          ></ion-textarea>
+          <ion-textarea
+            rows="3"
+            label="Medium"
+            label-placement="stacked"
+            helper-text="rows=3, label-placement=stacked"
+            value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
+          ></ion-textarea>
+          <ion-textarea
+            rows="3"
+            label="Large"
+            label-placement="stacked"
+            helper-text="rows=3, label-placement=stacked"
+            value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
+          ></ion-textarea>
+          <ion-textarea
+            rows="5"
+            label="Small"
+            label-placement="stacked"
+            helper-text="rows=5, label-placement=stacked"
+            value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
+          ></ion-textarea>
+          <ion-textarea
+            rows="5"
+            label="Medium"
+            label-placement="stacked"
+            helper-text="rows=5, label-placement=stacked"
+            value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
+          ></ion-textarea>
+          <ion-textarea
+            rows="5"
+            label="Large"
+            label-placement="stacked"
+            helper-text="rows=5, label-placement=stacked"
+            value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
+          ></ion-textarea>
+        </div>
+      `,
+        config
+      );
+
+      const container = page.locator('#container');
+      await expect(container).toHaveScreenshot(screenshot(`textarea-rows-different-values`));
+    });
+
+    test('should respect rows attribute with fill outline and solid', async ({ page }) => {
+      await page.setContent(
+        `
+        <div id="container" style="display: flex; flex-direction: column; gap: 20px;">
+          <ion-textarea
+            rows="4"
+            fill="outline"
+            label="Outline"
+            label-placement="stacked"
+            helper-text="rows=4, fill=outline, label-placement=stacked"
+            value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
+          ></ion-textarea>
+          <ion-textarea
+            rows="4"
+            fill="solid"
+            label="Solid"
+            label-placement="stacked"
+            helper-text="rows=4, fill=solid, label-placement=stacked"
+            value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
+          ></ion-textarea>
+        </div>
+      `,
+        config
+      );
+
+      const container = page.locator('#container');
+      await expect(container).toHaveScreenshot(screenshot(`textarea-rows-4-fill`));
+    });
+
+    test('should respect rows attribute with different sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <div id="container" style="display: flex; flex-direction: column; gap: 20px;">
+          <ion-textarea
+            rows="3"
+            size="small"
+            label="Small Size"
+            label-placement="stacked"
+            helper-text="rows=3, size=small, label-placement=stacked"
+            value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
+          ></ion-textarea>
+          <ion-textarea
+            rows="3"
+            size="medium"
+            label="Medium Size"
+            label-placement="stacked"
+            helper-text="rows=3, size=medium, label-placement=stacked"
+            value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
+          ></ion-textarea>
+          <ion-textarea
+            rows="3"
+            size="large"
+            label="Large Size"
+            label-placement="stacked"
+            helper-text="rows=3, size=large, label-placement=stacked"
+            value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
+          ></ion-textarea>
+        </div>
+      `,
+        config
+      );
+
+      const container = page.locator('#container');
+      await expect(container).toHaveScreenshot(screenshot(`textarea-rows-different-sizes`));
-      await expect(container).toHaveScreenshot(screenshot(`textarea-rows-different-sizes`));
+      await expect(container).toHaveScreenshot(screenshot(`textarea-rows-sizes`));
-      await expect(container).toHaveScreenshot(screenshot(`textarea-rows-different-sizes`));
+      await expect(container).toHaveScreenshot(screenshot(`textarea-rows-sizes`));
+    });
+
+    test('should respect rows attribute with value content', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-textarea
+          rows="3"
+          label="Comments"
+          label-placement="stacked"
+          helper-text="rows=3, label-placement=stacked"
+          value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
+        ></ion-textarea>
+      `,
+        config
+      );
+
+      const textarea = page.locator('ion-textarea');
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-rows-3-with-value`));
+    });
+
+    test('should respect rows when auto-grow is enabled', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-textarea
+          rows="3"
+          auto-grow="true"
+          label="Comments"
+          label-placement="stacked"
+          helper-text="rows=3, auto-grow=true, label-placement=stacked"
+          value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
+        ></ion-textarea>
+      `,
+        config
+      );
+
+      const textarea = page.locator('ion-textarea');
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-rows-3-autogrow`));
+    });
+  });
+});
diff --git a/...s-snapshots/textarea-rows-3-autogrow-ionic-md-ltr-light-Mobile-Chrome-linux.png b/...s-snapshots/textarea-rows-3-autogrow-ionic-md-ltr-light-Mobile-Chrome-linux.png
diff --git a/...-snapshots/textarea-rows-3-autogrow-ionic-md-ltr-light-Mobile-Firefox-linux.png b/...-snapshots/textarea-rows-3-autogrow-ionic-md-ltr-light-Mobile-Firefox-linux.png
diff --git a/...s-snapshots/textarea-rows-3-autogrow-ionic-md-ltr-light-Mobile-Safari-linux.png b/...s-snapshots/textarea-rows-3-autogrow-ionic-md-ltr-light-Mobile-Safari-linux.png
diff --git a/...rea.e2e.ts-snapshots/textarea-rows-3-ionic-md-ltr-light-Mobile-Chrome-linux.png b/...rea.e2e.ts-snapshots/textarea-rows-3-ionic-md-ltr-light-Mobile-Chrome-linux.png
diff --git a/...ea.e2e.ts-snapshots/textarea-rows-3-ionic-md-ltr-light-Mobile-Firefox-linux.png b/...ea.e2e.ts-snapshots/textarea-rows-3-ionic-md-ltr-light-Mobile-Firefox-linux.png
diff --git a/...rea.e2e.ts-snapshots/textarea-rows-3-ionic-md-ltr-light-Mobile-Safari-linux.png b/...rea.e2e.ts-snapshots/textarea-rows-3-ionic-md-ltr-light-Mobile-Safari-linux.png
diff --git a/...snapshots/textarea-rows-3-with-value-ionic-md-ltr-light-Mobile-Chrome-linux.png b/...snapshots/textarea-rows-3-with-value-ionic-md-ltr-light-Mobile-Chrome-linux.png
diff --git a/...napshots/textarea-rows-3-with-value-ionic-md-ltr-light-Mobile-Firefox-linux.png b/...napshots/textarea-rows-3-with-value-ionic-md-ltr-light-Mobile-Firefox-linux.png
diff --git a/...snapshots/textarea-rows-3-with-value-ionic-md-ltr-light-Mobile-Safari-linux.png b/...snapshots/textarea-rows-3-with-value-ionic-md-ltr-light-Mobile-Safari-linux.png
diff --git a/...2e.ts-snapshots/textarea-rows-4-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png b/...2e.ts-snapshots/textarea-rows-4-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png
diff --git a/...e.ts-snapshots/textarea-rows-4-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png b/...e.ts-snapshots/textarea-rows-4-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png
diff --git a/...2e.ts-snapshots/textarea-rows-4-fill-ionic-md-ltr-light-Mobile-Safari-linux.png b/...2e.ts-snapshots/textarea-rows-4-fill-ionic-md-ltr-light-Mobile-Safari-linux.png
diff --git a/...pshots/textarea-rows-different-sizes-ionic-md-ltr-light-Mobile-Chrome-linux.png b/...pshots/textarea-rows-different-sizes-ionic-md-ltr-light-Mobile-Chrome-linux.png
diff --git a/...shots/textarea-rows-different-sizes-ionic-md-ltr-light-Mobile-Firefox-linux.png b/...shots/textarea-rows-different-sizes-ionic-md-ltr-light-Mobile-Firefox-linux.png
diff --git a/...pshots/textarea-rows-different-sizes-ionic-md-ltr-light-Mobile-Safari-linux.png b/...pshots/textarea-rows-different-sizes-ionic-md-ltr-light-Mobile-Safari-linux.png
diff --git a/...shots/textarea-rows-different-values-ionic-md-ltr-light-Mobile-Chrome-linux.png b/...shots/textarea-rows-different-values-ionic-md-ltr-light-Mobile-Chrome-linux.png
diff --git a/...hots/textarea-rows-different-values-ionic-md-ltr-light-Mobile-Firefox-linux.png b/...hots/textarea-rows-different-values-ionic-md-ltr-light-Mobile-Firefox-linux.png
diff --git a/...shots/textarea-rows-different-values-ionic-md-ltr-light-Mobile-Safari-linux.png b/...shots/textarea-rows-different-values-ionic-md-ltr-light-Mobile-Safari-linux.png
diff --git a/core/src/components/textarea/textarea.common.scss b/core/src/components/textarea/textarea.common.scss
@@ -539,6 +539,18 @@
   opacity: 1;
 }
 
+/**
+ * When the rows attribute is set, the textarea should not force a min-height,
+ * but rather respect the natural height of the textarea, especially when
+ * rows is set to 1.
+ */
+ :host(.textarea-fill-solid[rows]),
+ :host(.textarea-fill-outline[rows]),
+ :host(.textarea-label-placement-stacked[rows]),
+ :host(.textarea-label-placement-floating[rows]) {
+  min-height: auto;
+}
+
 // Start / End Slots
 // ----------------------------------------------------------------