diff --git a/core/src/components/input/input.ios.scss b/core/src/components/input/input.ios.scss
index 013f1e385bc..d2e7cfe1ab5 100644
--- a/core/src/components/input/input.ios.scss
+++ b/core/src/components/input/input.ios.scss
@@ -6,6 +6,8 @@
   --padding-end: #{$input-ios-padding-end};
   --padding-bottom: #{$input-ios-padding-bottom};
   --padding-start: #{$input-ios-padding-start};
+  --border-width: #{$hairlines-width};
+  --border-color: #{$item-ios-border-color};
 
   font-size: $input-ios-font-size;
 }
diff --git a/core/src/components/input/input.md.scss b/core/src/components/input/input.md.scss
index 51bc9ce6cb1..c65da943cc3 100644
--- a/core/src/components/input/input.md.scss
+++ b/core/src/components/input/input.md.scss
@@ -10,6 +10,8 @@
   --padding-end: #{$input-md-padding-end};
   --padding-bottom: #{$input-md-padding-bottom};
   --padding-start: #{$input-md-padding-start};
+  --border-width: 1px;
+  --border-color: #{$item-md-border-color};
 
   font-size: $input-md-font-size;
 }
diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss
index 570407df233..80a62771693 100644
--- a/core/src/components/input/input.scss
+++ b/core/src/components/input/input.scss
@@ -23,10 +23,10 @@
    * @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 --border-color: Color of the input border
-   * @prop --border-radius: Radius of the input border
-   * @prop --border-style: Style of the input border
-   * @prop --border-width: Width of the input border
+   * @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
+   * @prop --border-style: Color of the border below the input when using helper text, error text, or counter
+   * @prop --border-width: Color of the border below the input when using helper text, error text, or counter
    */
   --placeholder-color: initial;
   --placeholder-font-style: initial;
@@ -38,13 +38,13 @@
   --padding-start: 0;
   --background: transparent;
   --color: initial;
+  --border-style: solid;
+  --highlight-color-focused: #{ion-color(primary, base)};
+  --highlight-color-valid: #{ion-color(success, base)};
+  --highlight-color-invalid: #{ion-color(danger, base)};
 
-  display: flex;
   position: relative;
 
-  flex: 1;
-  align-items: center;
-
   width: 100%;
 
   /* stylelint-disable-next-line all */
@@ -58,6 +58,13 @@
   z-index: $z-index-item-input;
 }
 
+:host(.legacy-input) {
+  display: flex;
+
+  flex: 1;
+  align-items: center;
+}
+
 :host-context(ion-item:not(.item-label)) {
   --padding-start: 0;
 }
@@ -200,3 +207,54 @@
 
   opacity: 1;
 }
+
+// Input Wrapper
+// ----------------------------------------------------------------
+.input-wrapper {
+  display: flex;
+
+  flex-grow: 1;
+
+  align-items: center;
+}
+
+// Input Bottom Content
+// ----------------------------------------------------------------
+
+.input-bottom {
+  @include padding(5px, 0, 0, 0);
+
+  display: flex;
+
+  justify-content: space-between;
+
+  border-top: var(--border-width) var(--border-style) var(--border-color);
+
+  font-size: 12px;
+}
+
+// Input Hint Text
+// ----------------------------------------------------------------
+
+/**
+ * Error text should only be shown when .ion-invalid is
+ * present on the input. Otherwise the helper text should
+ * be shown.
+ */
+.input-bottom .error-text {
+  display: none;
+
+  color: var(--highlight-color-invalid);
+}
+
+.input-bottom .helper-text {
+  display: block;
+}
+
+:host(.ion-invalid) .input-bottom .error-text {
+  display: block;
+}
+
+:host(.ion-invalid) .input-bottom .helper-text {
+  display: none;
+}
diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index c7dad4157cb..8f1d62935dd 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -512,6 +512,31 @@ export class Input implements ComponentInterface {
     return this.getValue().length > 0;
   }
 
+  /**
+   * Renders the helper text or error text values
+   */
+  private renderHintText() {
+    const { helperText, errorText } = this;
+
+    return [<div class="helper-text">{helperText}</div>, <div class="error-text">{errorText}</div>];
+  }
+
+  /**
+   * Responsible for rendering helper text,
+   * error text, and counter. This element should only
+   * be rendered if hint text is set or counter is enabled.
+   */
+  private renderBottomContent() {
+    const { helperText, errorText } = this;
+
+    const hasHintText = helperText !== undefined || errorText !== undefined;
+    if (!hasHintText) {
+      return;
+    }
+
+    return <div class="input-bottom">{this.renderHintText()}</div>;
+  }
+
   private renderInput() {
     const { disabled, readonly, inputId } = this;
     const mode = getIonMode(this);
@@ -526,57 +551,60 @@ export class Input implements ComponentInterface {
           'has-focus': this.hasFocus,
         })}
       >
-        <label htmlFor={inputId}>{this.label}</label>
-        <input
-          class="native-input"
-          ref={(input) => (this.nativeInput = input)}
-          id={inputId}
-          disabled={disabled}
-          accept={this.accept}
-          autoCapitalize={this.autocapitalize}
-          autoComplete={this.autocomplete}
-          autoCorrect={this.autocorrect}
-          autoFocus={this.autofocus}
-          enterKeyHint={this.enterkeyhint}
-          inputMode={this.inputmode}
-          min={this.min}
-          max={this.max}
-          minLength={this.minlength}
-          maxLength={this.maxlength}
-          multiple={this.multiple}
-          name={this.name}
-          pattern={this.pattern}
-          placeholder={this.placeholder || ''}
-          readOnly={readonly}
-          required={this.required}
-          spellcheck={this.spellcheck}
-          step={this.step}
-          size={this.size}
-          type={this.type}
-          value={value}
-          onInput={this.onInput}
-          onChange={this.onChange}
-          onBlur={this.onBlur}
-          onFocus={this.onFocus}
-          onKeyDown={this.onKeydown}
-          {...this.inheritedAttributes}
-        />
-        {this.clearInput && !readonly && !disabled && (
-          <button
-            aria-label="reset"
-            type="button"
-            class="input-clear-icon"
-            onPointerDown={(ev) => {
-              /**
-               * This prevents mobile browsers from
-               * blurring the input when the clear
-               * button is activated.
-               */
-              ev.preventDefault();
-            }}
-            onClick={this.onClearButtonClick}
+        <div class="input-wrapper">
+          <label htmlFor={inputId}>{this.label}</label>
+          <input
+            class="native-input"
+            ref={(input) => (this.nativeInput = input)}
+            id={inputId}
+            disabled={disabled}
+            accept={this.accept}
+            autoCapitalize={this.autocapitalize}
+            autoComplete={this.autocomplete}
+            autoCorrect={this.autocorrect}
+            autoFocus={this.autofocus}
+            enterKeyHint={this.enterkeyhint}
+            inputMode={this.inputmode}
+            min={this.min}
+            max={this.max}
+            minLength={this.minlength}
+            maxLength={this.maxlength}
+            multiple={this.multiple}
+            name={this.name}
+            pattern={this.pattern}
+            placeholder={this.placeholder || ''}
+            readOnly={readonly}
+            required={this.required}
+            spellcheck={this.spellcheck}
+            step={this.step}
+            size={this.size}
+            type={this.type}
+            value={value}
+            onInput={this.onInput}
+            onChange={this.onChange}
+            onBlur={this.onBlur}
+            onFocus={this.onFocus}
+            onKeyDown={this.onKeydown}
+            {...this.inheritedAttributes}
           />
-        )}
+          {this.clearInput && !readonly && !disabled && (
+            <button
+              aria-label="reset"
+              type="button"
+              class="input-clear-icon"
+              onPointerDown={(ev) => {
+                /**
+                 * This prevents mobile browsers from
+                 * blurring the input when the clear
+                 * button is activated.
+                 */
+                ev.preventDefault();
+              }}
+              onClick={this.onClearButtonClick}
+            />
+          )}
+        </div>
+        {this.renderBottomContent()}
       </Host>
     );
   }
@@ -607,6 +635,7 @@ For inputs that do not have a visible label, developers should use "aria-label"
           [mode]: true,
           'has-value': this.hasValue(),
           'has-focus': this.hasFocus,
+          'legacy-input': true,
         })}
       >
         <input
diff --git a/core/src/components/input/test/bottom-content/index.html b/core/src/components/input/test/bottom-content/index.html
new file mode 100644
index 00000000000..a2d4298d077
--- /dev/null
+++ b/core/src/components/input/test/bottom-content/index.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Input - Bottom Content</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;
+        }
+      }
+
+      ion-input.custom-error-color {
+        --highlight-color-invalid: purple;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Input - Basic</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content" class="ion-padding">
+        <div class="grid">
+          <div class="grid-item">
+            <h2>No Hint</h2>
+            <ion-input label="Email"></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Helper Hint</h2>
+            <ion-input label="Email" helper-text="Enter your email"></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Error Hint</h2>
+            <ion-input class="ion-invalid" label="Email" error-text="Please enter a valid email"></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Custom Error Color</h2>
+            <ion-input
+              class="ion-invalid custom-error-color"
+              label="Email"
+              error-text="Please enter a valid email"
+            ></ion-input>
+          </div>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts b/core/src/components/input/test/bottom-content/input.e2e.ts
new file mode 100644
index 00000000000..301c43778c0
--- /dev/null
+++ b/core/src/components/input/test/bottom-content/input.e2e.ts
@@ -0,0 +1,79 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('input: bottom content', () => {
+  test.beforeEach(({ skip }) => {
+    skip.rtl();
+    skip.mode('ios', 'Rendering is the same across modes');
+  });
+  test('should not render bottom content if no hint or counter is enabled', async ({ page }) => {
+    await page.setContent(`<ion-input label="my input"></ion-input>`);
+
+    const bottomEl = page.locator('ion-input .item-bottom');
+    await expect(bottomEl).toHaveCount(0);
+  });
+});
+
+test.describe('input: hint text', () => {
+  test.describe('input: hint text functionality', () => {
+    test.beforeEach(({ skip }) => {
+      skip.rtl();
+      skip.mode('ios', 'Rendering is the same across modes');
+    });
+    test('helper text should be visible initially', async ({ page }) => {
+      await page.setContent(`<ion-input helper-text="my helper" error-text="my error" label="my input"></ion-input>`);
+
+      const helperText = page.locator('ion-input .helper-text');
+      const errorText = page.locator('ion-input .error-text');
+      await expect(helperText).toBeVisible();
+      await expect(helperText).toHaveText('my helper');
+      await expect(errorText).toBeHidden();
+    });
+    test('error text should be visible when input is invalid', async ({ page }) => {
+      await page.setContent(
+        `<ion-input class="ion-invalid" helper-text="my helper" error-text="my error" label="my input"></ion-input>`
+      );
+
+      const helperText = page.locator('ion-input .helper-text');
+      const errorText = page.locator('ion-input .error-text');
+      await expect(helperText).toBeHidden();
+      await expect(errorText).toBeVisible();
+      await expect(errorText).toHaveText('my error');
+    });
+    test('error text should change when variable is customized', async ({ page }) => {
+      await page.setContent(`
+        <style>
+          ion-input.custom-input {
+            --highlight-color-invalid: purple;
+          }
+        </style>
+        <ion-input class="ion-invalid custom-input" label="my label" error-text="my error"></ion-input>
+      `);
+
+      const errorText = page.locator('ion-input .error-text');
+      expect(await errorText.screenshot()).toMatchSnapshot(
+        `input-error-custom-color-${page.getSnapshotSettings()}.png`
+      );
+    });
+  });
+  test.describe('input: hint text rendering', () => {
+    test.describe('regular inputs', () => {
+      test('should not have visual regressions when rendering helper text', async ({ page }) => {
+        await page.setContent(`<ion-input helper-text="my helper" label="my input"></ion-input>`);
+
+        const bottomEl = page.locator('ion-input .input-bottom');
+        expect(await bottomEl.screenshot()).toMatchSnapshot(
+          `input-bottom-content-helper-${page.getSnapshotSettings()}.png`
+        );
+      });
+      test('should not have visual regressions when rendering error text', async ({ page }) => {
+        await page.setContent(`<ion-input class="ion-invalid" error-text="my helper" label="my input"></ion-input>`);
+
+        const bottomEl = page.locator('ion-input .input-bottom');
+        expect(await bottomEl.screenshot()).toMatchSnapshot(
+          `input-bottom-content-error-${page.getSnapshotSettings()}.png`
+        );
+      });
+    });
+  });
+});
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..4bc8da4088d
Binary files /dev/null and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..af6b3beac15
Binary files /dev/null and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..ccea5857f0f
Binary files /dev/null and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..9856c52d848
Binary files /dev/null and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..f7bd3b0adee
Binary files /dev/null and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..79b2b9c9747
Binary files /dev/null and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..ac39a66167e
Binary files /dev/null and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..e6fbfdfa171
Binary files /dev/null and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..c683cd43919
Binary files /dev/null and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..297268ab40b
Binary files /dev/null and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..4de3989fb5d
Binary files /dev/null and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..7d98f74f7fc
Binary files /dev/null and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..745a59c5cfd
Binary files /dev/null and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..40e2b929f20
Binary files /dev/null and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..c446ccdc06e
Binary files /dev/null and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..e55a03fb382
Binary files /dev/null and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..a3c96e15fce
Binary files /dev/null and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..84e0520773d
Binary files /dev/null and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..028c5fd2c4f
Binary files /dev/null and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..3075d064755
Binary files /dev/null and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..ed930b3b00b
Binary files /dev/null and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..1a1503f3e3a
Binary files /dev/null and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..5ce00612ffb
Binary files /dev/null and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..7234dc28ff8
Binary files /dev/null and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-md-rtl-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
new file mode 100644
index 00000000000..038a4d4d813
Binary files /dev/null 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
new file mode 100644
index 00000000000..214dd1416e3
Binary files /dev/null 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
new file mode 100644
index 00000000000..d5986d72faf
Binary files /dev/null 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/item/item.tsx b/core/src/components/item/item.tsx
index 0f2c79af3c5..317c3647c50 100644
--- a/core/src/components/item/item.tsx
+++ b/core/src/components/item/item.tsx
@@ -1,5 +1,6 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Listen, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
+import { printIonError, printIonWarning } from '@utils/logging';
 import { chevronForward } from 'ionicons/icons';
 
 import { getIonMode } from '../../global/ionic-global';
@@ -7,7 +8,6 @@ import type { AnimationBuilder, Color, CssClassMap, RouterDirection, StyleEventD
 import type { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
 import type { Attributes } from '../../utils/helpers';
 import { inheritAttributes, raf } from '../../utils/helpers';
-import { printIonError } from '../../utils/logging';
 import { createColorClasses, hostContext, openURL } from '../../utils/theme';
 import type { InputInputEventDetail } from '../input/input-interface';
 
@@ -19,8 +19,8 @@ import type { CounterFormatter } from './item-interface';
  * @slot - Content is placed between the named slots if provided without a slot.
  * @slot start - Content is placed to the left of the item text in LTR, and to the right in RTL.
  * @slot end - Content is placed to the right of the item text in LTR, and to the left in RTL.
- * @slot helper - Content is placed under the item and displayed when no error is detected.
- * @slot error - Content is placed under the item and displayed when an error is detected.
+ * @slot helper - Content is placed under the item and displayed when no error is detected. @deprecated Use the "helperText" property on ion-input or ion-textarea instead.
+ * @slot error - Content is placed under the item and displayed when an error is detected. @deprecated Use the "errorText" property on ion-input or ion-textarea instead.
  *
  * @part native - The native HTML button, anchor or div element that wraps all child elements.
  * @part detail-icon - The chevron icon for the item. Only applies when `detail="true"`.
@@ -207,8 +207,25 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
   }
 
   componentDidLoad() {
+    const { el } = this;
+    const hasHelperSlot = el.querySelector('[slot="helper"]') !== null;
+    if (hasHelperSlot) {
+      printIonWarning(
+        'The "helper" slot has been deprecated in favor of using the "helperText" property on ion-input or ion-textarea.',
+        el
+      );
+    }
+
+    const hasErrorSlot = el.querySelector('[slot="error"]') !== null;
+    if (hasErrorSlot) {
+      printIonWarning(
+        'The "error" slot has been deprecated in favor of using the "errorText" property on ion-input or ion-textarea.',
+        el
+      );
+    }
+
     raf(() => {
-      this.inheritedAriaAttributes = inheritAttributes(this.el, ['aria-label']);
+      this.inheritedAriaAttributes = inheritAttributes(el, ['aria-label']);
       this.setMultipleInputs();
       this.focusable = this.isFocusable();
     });