diff --git a/core/api.txt b/core/api.txt
index 166dac1695..52b5adf0fe 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -656,6 +656,7 @@ ion-input,css-prop,--placeholder-color
 ion-input,css-prop,--placeholder-font-style
 ion-input,css-prop,--placeholder-font-weight
 ion-input,css-prop,--placeholder-opacity
+ion-input,css-prop,--text-color-invalid
 
 ion-input-password-toggle,shadow
 ion-input-password-toggle,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
diff --git a/core/src/components/input/input.ionic.scss b/core/src/components/input/input.ionic.scss
index 0f9a59f8b1..21411caa5f 100644
--- a/core/src/components/input/input.ionic.scss
+++ b/core/src/components/input/input.ionic.scss
@@ -8,9 +8,8 @@
 :host {
   --border-width: #{$ionic-border-size-small};
   --border-color: #{$ionic-color-neutral-300};
-
-  // TODO(FW-6113): Verify the ionic design token is correct once it's available and remove the hardcoded value.
-  --highlight-color-invalid: var(--ionic-color-error-600, #970606);
+  --highlight-color-invalid: #{$ionic-color-error-400};
+  --text-color-invalid: #{$ionic-color-error-600};
 }
 
 // Ionic Input Sizes
@@ -28,6 +27,6 @@
   color: var(--ionic-color-neutral-600, #535353);
 }
 
-.input-bottom .error-text {
-  color: var(--highlight-color-invalid);
+:host(.ion-touched.ion-invalid) .error-text {
+  color: var(--text-color-invalid);
 }
diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss
index 80ebc9896a..6a8cddeffe 100644
--- a/core/src/components/input/input.scss
+++ b/core/src/components/input/input.scss
@@ -23,6 +23,7 @@
    * @prop --highlight-color-focused: The color of the highlight on the input when focused
    * @prop --highlight-color-valid: The color of the highlight on the input when valid
    * @prop --highlight-color-invalid: The color of the highlight on the input when invalid
+   * @prop --text-color-invalid: The color of the error text on the input when invalid. Only applies to ionic theme.
    *
    * @prop --border-color: Color of the border below the input when using helper text, error text, or counter
    * @prop --border-radius: Radius of the input. A large radius may display unevenly when using fill="outline"; if needed, use shape="round" instead or increase --padding-start.
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts b/core/src/components/input/test/bottom-content/input.e2e.ts
index 5abe30d54d..880e0fe85b 100644
--- a/core/src/components/input/test/bottom-content/input.e2e.ts
+++ b/core/src/components/input/test/bottom-content/input.e2e.ts
@@ -105,12 +105,13 @@ configs({ modes: ['md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, sc
         await expect(errorText).toBeVisible();
         await expect(errorText).toHaveText('my error');
       });
-      test('error text should change when variable is customized', async ({ page }) => {
+      test('error text and highlight should change when variable is customized', async ({ page }) => {
         await page.setContent(
           `
           <style>
             ion-input.custom-input {
               --highlight-color-invalid: purple;
+              --text-color-invalid: purple; /* ionic only */
             }
           </style>
           <ion-input class="ion-invalid ion-touched custom-input" label="my label" error-text="my error"></ion-input>
@@ -118,8 +119,8 @@ configs({ modes: ['md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, sc
           config
         );
 
-        const errorText = page.locator('ion-input .error-text');
-        await expect(errorText).toHaveScreenshot(screenshot(`input-error-custom-color`));
+        const bottomEl = page.locator('ion-input .input-bottom');
+        await expect(bottomEl).toHaveScreenshot(screenshot(`input-error-custom-color`));
       });
     });
     test.describe('input: hint text rendering', () => {
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 28fdb7ce3f..fc24853efb 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Firefox-linux.png
index a7ed12e5d0..502516f9bc 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Safari-linux.png
index d34fbb9865..22af658a60 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 311ca9a9c8..9501df02e7 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 214dd1416e..75c38b841a 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-ionic-md-ltr-light-Mobile-Safari-linux.png
index b8a24b961a..e2a501d68b 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-md-ltr-Mobile-Chrome-linux.png
index 311ca9a9c8..9501df02e7 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-md-ltr-Mobile-Firefox-linux.png
index 214dd1416e..75c38b841a 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-md-ltr-Mobile-Safari-linux.png
index b8a24b961a..e2a501d68b 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-md-ltr-Mobile-Safari-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts b/core/src/components/input/test/highlight/input.e2e.ts
index 719fd811c9..60ac42fe31 100644
--- a/core/src/components/input/test/highlight/input.e2e.ts
+++ b/core/src/components/input/test/highlight/input.e2e.ts
@@ -344,3 +344,51 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('input: highlights'), () => {
+    test.describe('input: no fill', () => {
+      test('should render invalid state correctly', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-input
+            value="hi@ionic.io"
+            class="ion-touched ion-invalid"
+            label="Email"
+            error-text="Please enter a valid email"
+            helper-text="Enter an email"
+            counter="true"
+            maxlength="20"
+          ></ion-input>
+        `,
+          config
+        );
+
+        const input = page.locator('ion-input');
+        await expect(input).toHaveScreenshot(screenshot(`input-no-fill-invalid`));
+      });
+    });
+    test.describe('input: outline', () => {
+      test('should render invalid state correctly', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-input
+            fill="outline"
+            value="hi@ionic.io"
+            class="ion-touched ion-invalid"
+            label="Email"
+            error-text="Please enter a valid email"
+            helper-text="Enter an email"
+            counter="true"
+            maxlength="20"
+          ></ion-input>
+        `,
+          config
+        );
+
+        const input = page.locator('ion-input');
+        await expect(input).toHaveScreenshot(screenshot(`input-outline-invalid`));
+      });
+    });
+  });
+});
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..4f88c1166d
Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..ad6c5625ee
Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..f32157a224
Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..1b09273be4
Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..cecc2a850c
Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..06fd69b534
Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png differ