ionic-team · rugoncalves · Jan 28, 2026 · Jan 28, 2026 · Feb 6, 2026 · Feb 6, 2026
@@ -12,6 +12,28 @@
     <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>
@@ -23,17 +45,22 @@
       </ion-header>
 
       <ion-content id="content" class="ion-padding">
-        <ion-textarea
-          fill="outline"
-          label="Label"
-          label-placement="stacked"
-          placeholder="Placeholder"
-          helper-text="Helper message"
-          counter="true"
-          maxlength="999"
-        >
-          <ion-icon slot="end" name="square-outline"></ion-icon>
-        </ion-textarea>
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Default</h2>
+            <ion-textarea
+              fill="outline"
+              label="Label"
+              label-placement="stacked"
+              placeholder="Placeholder"
+              helper-text="Helper message"
+              counter="true"
+              maxlength="999"
+            >
+              <ion-icon slot="end" name="square-outline"></ion-icon>
+            </ion-textarea>
+          </div>
+        </div>
       </ion-content>
     </ion-app>
   </body>

@@ -0,0 +1,255 @@
+<!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-template-columns: repeat(3, minmax(250px, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-        grid-template-columns: repeat(3, minmax(250px, 1fr));
+        grid-template-columns: repeat(auto-fit, 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;
+        }
+      }
-      @media screen and (max-width: 800px) {
-        .grid {
-          grid-template-columns: 1fr;
-          padding: 0;
-        }
-      }
-      @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="Small"
+              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="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>
+          </div>
+
+          <div class="grid-item">
+            <h2>Rows: 8</h2>
+            <ion-textarea
+              rows="8"
+              label="Large"
+              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: 4, Fill Outline</h2>
+            <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>
+          </div>
+
+          <div class="grid-item">
+            <h2>Rows: 4, Fill Solid</h2>
+            <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>
-          <div class="grid-item">
-            <h2>Rows: 4, Fill Outline</h2>
-            <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>
-          </div>
-
-          <div class="grid-item">
-            <h2>Rows: 4, Fill Solid</h2>
-            <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>
-          <div class="grid-item">
-            <h2>Rows: 4, Fill Outline</h2>
-            <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>
-          </div>
-
-          <div class="grid-item">
-            <h2>Rows: 4, Fill Solid</h2>
-            <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>
+
+          <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 class="grid-item">
+            <h2>Rows: 3, Label Start</h2>
+            <ion-textarea
+              rows="3"
+              fill="outline"
+              label="Start"
+              label-placement="start"
+              helper-text="rows=3, fill=outline, label-placement=start"
+              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, Label End</h2>
+            <ion-textarea
+              rows="3"
+              fill="outline"
+              label="End"
+              label-placement="end"
+              helper-text="rows=3, fill=outline, label-placement=end"
+              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, Label Floating</h2>
+            <ion-textarea
+              rows="3"
+              fill="outline"
+              label="Floating"
+              label-placement="floating"
+              helper-text="rows=3, fill=outline, label-placement=floating"
+              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, Label Fixed</h2>
+            <ion-textarea
+              rows="3"
+              fill="outline"
+              label="Fixed"
+              label-placement="fixed"
+              helper-text="rows=3, fill=outline, label-placement=fixed"
+              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, Shape Soft</h2>
+            <ion-textarea
+              rows="3"
+              shape="soft"
+              fill="outline"
+              label="Soft"
+              label-placement="stacked"
+              helper-text="rows=3, shape=soft, 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>
+          </div>
+
+          <div class="grid-item">
+            <h2>Rows: 3, Shape Round</h2>
+            <ion-textarea
+              rows="3"
+              shape="round"
+              fill="outline"
+              label="Round"
+              label-placement="stacked"
+              helper-text="rows=3, shape=round, 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>
+          </div>
+
+          <div class="grid-item">
+            <h2>Rows: 3, Shape Rectangular</h2>
+            <ion-textarea
+              rows="3"
+              shape="rectangular"
+              fill="outline"
+              label="Rectangular"
+              label-placement="stacked"
+              helper-text="rows=3, shape=rectangular, 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>
+          </div>
-          <div class="grid-item">
-            <h2>Rows: 3, Label Start</h2>
-            <ion-textarea
-              rows="3"
-              fill="outline"
-              label="Start"
-              label-placement="start"
-              helper-text="rows=3, fill=outline, label-placement=start"
-              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, Label End</h2>
-            <ion-textarea
-              rows="3"
-              fill="outline"
-              label="End"
-              label-placement="end"
-              helper-text="rows=3, fill=outline, label-placement=end"
-              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, Label Floating</h2>
-            <ion-textarea
-              rows="3"
-              fill="outline"
-              label="Floating"
-              label-placement="floating"
-              helper-text="rows=3, fill=outline, label-placement=floating"
-              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, Label Fixed</h2>
-            <ion-textarea
-              rows="3"
-              fill="outline"
-              label="Fixed"
-              label-placement="fixed"
-              helper-text="rows=3, fill=outline, label-placement=fixed"
-              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, Shape Soft</h2>
-            <ion-textarea
-              rows="3"
-              shape="soft"
-              fill="outline"
-              label="Soft"
-              label-placement="stacked"
-              helper-text="rows=3, shape=soft, 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>
-          </div>
-
-          <div class="grid-item">
-            <h2>Rows: 3, Shape Round</h2>
-            <ion-textarea
-              rows="3"
-              shape="round"
-              fill="outline"
-              label="Round"
-              label-placement="stacked"
-              helper-text="rows=3, shape=round, 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>
-          </div>
-
-          <div class="grid-item">
-            <h2>Rows: 3, Shape Rectangular</h2>
-            <ion-textarea
-              rows="3"
-              shape="rectangular"
-              fill="outline"
-              label="Rectangular"
-              label-placement="stacked"
-              helper-text="rows=3, shape=rectangular, 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>
-          </div>
-          <div class="grid-item">
-            <h2>Rows: 3, Label Start</h2>
-            <ion-textarea
-              rows="3"
-              fill="outline"
-              label="Start"
-              label-placement="start"
-              helper-text="rows=3, fill=outline, label-placement=start"
-              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, Label End</h2>
-            <ion-textarea
-              rows="3"
-              fill="outline"
-              label="End"
-              label-placement="end"
-              helper-text="rows=3, fill=outline, label-placement=end"
-              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, Label Floating</h2>
-            <ion-textarea
-              rows="3"
-              fill="outline"
-              label="Floating"
-              label-placement="floating"
-              helper-text="rows=3, fill=outline, label-placement=floating"
-              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, Label Fixed</h2>
-            <ion-textarea
-              rows="3"
-              fill="outline"
-              label="Fixed"
-              label-placement="fixed"
-              helper-text="rows=3, fill=outline, label-placement=fixed"
-              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, Shape Soft</h2>
-            <ion-textarea
-              rows="3"
-              shape="soft"
-              fill="outline"
-              label="Soft"
-              label-placement="stacked"
-              helper-text="rows=3, shape=soft, 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>
-          </div>
-
-          <div class="grid-item">
-            <h2>Rows: 3, Shape Round</h2>
-            <ion-textarea
-              rows="3"
-              shape="round"
-              fill="outline"
-              label="Round"
-              label-placement="stacked"
-              helper-text="rows=3, shape=round, 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>
-          </div>
-
-          <div class="grid-item">
-            <h2>Rows: 3, Shape Rectangular</h2>
-            <ion-textarea
-              rows="3"
-              shape="rectangular"
-              fill="outline"
-              label="Rectangular"
-              label-placement="stacked"
-              helper-text="rows=3, shape=rectangular, 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>
-          </div>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>