diff --git a/core/src/components/textarea/test/states/textarea.e2e.ts b/core/src/components/textarea/test/states/textarea.e2e.ts
index 8bc048589f1..dc6b3ef5fa6 100644
--- a/core/src/components/textarea/test/states/textarea.e2e.ts
+++ b/core/src/components/textarea/test/states/textarea.e2e.ts
@@ -28,3 +28,21 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('focused'), () => {
+    test('should render focused textarea correctly', async ({ page }) => {
+      await page.setContent(
+        `
+        <div class="container ion-padding">
+          <ion-textarea fill="outline" value="hi@ionic.io" class="has-focus"></ion-textarea>
+        </div>
+      `,
+        config
+      );
+
+      const container = page.locator('.container');
+      await expect(container).toHaveScreenshot(screenshot(`textarea-focused`));
+    });
+  });
+});
diff --git a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..d852023217f
Binary files /dev/null and b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..8bff7a64ab3
Binary files /dev/null and b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-focused-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-focused-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..4951923b775
Binary files /dev/null and b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-focused-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/textarea.ionic.outline.scss b/core/src/components/textarea/textarea.ionic.outline.scss
index 6bd42fe85c2..45788e33b64 100644
--- a/core/src/components/textarea/textarea.ionic.outline.scss
+++ b/core/src/components/textarea/textarea.ionic.outline.scss
@@ -59,3 +59,10 @@
 :host(.textarea-fill-outline) textarea {
   margin-top: globals.$ion-space-100;
 }
+
+// Input Focus
+// ----------------------------------------------------------------
+
+:host(.textarea-fill-outline.has-focus) {
+  --border-width: #{globals.$ion-border-size-050};
+}
diff --git a/core/src/components/textarea/textarea.ionic.scss b/core/src/components/textarea/textarea.ionic.scss
index 28bef41a37b..4a19f85638e 100644
--- a/core/src/components/textarea/textarea.ionic.scss
+++ b/core/src/components/textarea/textarea.ionic.scss
@@ -132,3 +132,37 @@ ion-icon {
 .textarea-bottom .counter {
   color: globals.$ion-primitives-neutral-800;
 }
+
+:host(.has-focus.ion-valid),
+:host(.ion-touched.ion-invalid) {
+  --border-width: #{globals.$ion-border-size-025};
+}
+
+// Textarea Highlight
+// ----------------------------------------------------------------
+
+.textarea-highlight {
+  @include globals.position(null, null, -1px, 0);
+
+  position: absolute;
+
+  width: 100%;
+  height: globals.$ion-border-size-050;
+
+  transform: scale(0);
+
+  transition: transform globals.$ion-transition-time-200;
+
+  background: var(--border-color);
+}
+
+// Textarea Focus
+// ----------------------------------------------------------------
+
+:host(.has-focus) {
+  --border-color: #{globals.$ion-border-focus-default};
+}
+
+:host(.has-focus) .textarea-highlight {
+  transform: scale(1);
+}
diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx
index 12c107d7111..9b3f22caee6 100644
--- a/core/src/components/textarea/textarea.tsx
+++ b/core/src/components/textarea/textarea.tsx
@@ -670,7 +670,7 @@ export class Textarea implements ComponentInterface {
     const shape = this.getShape();
     const value = this.getValue();
     const inItem = hostContext('ion-item', this.el);
-    const shouldRenderHighlight = theme === 'md' && fill !== 'outline' && !inItem;
+    const shouldRenderHighlight = (theme === 'md' || theme === 'ionic') && fill !== 'outline' && !inItem;
 
     const hasValue = this.hasValue();
     const hasStartEndSlots = el.querySelector('[slot="start"], [slot="end"]') !== null;