diff --git a/core/src/components/input/input.md.outline.scss b/core/src/components/input/input.md.outline.scss
index 1345fb3ca39..f6465c846bc 100644
--- a/core/src/components/input/input.md.outline.scss
+++ b/core/src/components/input/input.md.outline.scss
@@ -1,3 +1,5 @@
+@import "./input.vars";
+
 // Input Fill: Outline
 // ----------------------------------------------------------------
 
@@ -9,7 +11,7 @@
 }
 
 :host(.input-fill-outline.input-shape-round) {
-  --border-radius: 9999px;
+  --border-radius: 28px;
   --padding-start: 32px;
   --padding-end: 32px;
 }
@@ -62,7 +64,15 @@
 
 :host(.input-fill-outline.input-label-placement-stacked) .label-text-wrapper,
 :host(.input-fill-outline.input-label-placement-floating) .label-text-wrapper {
-  @include transform-origin(center, top);
+  @include transform-origin(start, top);
+
+  position: absolute;
+
+  /**
+   * Label text should not extend
+   * beyond the bounds of the input.
+   */
+  max-width: calc(100% - var(--padding-start) - var(--padding-end));
 }
 
 /**
@@ -81,10 +91,15 @@
  */
 :host(.has-focus.input-fill-outline.input-label-placement-floating) .label-text-wrapper,
 :host(.has-value.input-fill-outline.input-label-placement-floating) .label-text-wrapper,
-:host(.input-fill-outline.input-label-placement-stacked) .label-text-wrapper,
 :host(.input-fill-outline.input-label-placement-stacked) .label-text-wrapper {
-  @include transform(translateY(-32%), scale(.75));
+  @include transform(translateY(-32%), scale(#{$input-floating-label-scale}));
   @include margin(0);
+
+  /**
+   * Label text should not extend
+   * beyond the bounds of the input.
+   */
+  max-width: calc((100% - var(--padding-start) - var(--padding-end) - #{$input-md-floating-label-padding * 2}) / #{$input-floating-label-scale});
 }
 
 /**
@@ -128,20 +143,50 @@
   border-bottom: var(--border-width) var(--border-style) var(--border-color);
 }
 
-:host(.input-fill-outline) .input-outline-start {
-  @include border-radius(var(--border-radius), 0px, 0px, var(--border-radius));
-  @include border(null, null, null, var(--border-width) var(--border-style) var(--border-color));
-
-  width: 12px;
+/**
+ * Ensures long labels do not cause the notch to flow
+ * out of bounds.
+ */
+:host(.input-fill-outline) .input-outline-notch {
+  max-width: calc(100% - var(--padding-start) - var(--padding-end));
 }
 
 /**
- * When shape="round", the starting outline fragment
- * should appear with a pill shape.
+ * This element ensures that the notch used
+ * the size of the scaled text so that the
+ * border cut out is the correct width.
+ * The text in this element should not
+ * be interactive.
  */
-:host(.input-fill-outline.input-shape-round) .input-outline-start {
-  @include border-radius(28px, 0px, 0px, 28px);
-  width: 28px;
+:host(.input-fill-outline) .notch-spacer {
+  /**
+   * We need $input-md-floating-label-padding of padding on the right.
+   * However, we also subtracted $input-md-floating-label-padding from
+   * the width of .input-outline-start
+   * to create space, so we need to take
+   * that into consideration here.
+   */
+  @include padding(null, #{$input-md-floating-label-padding * 2}, null, null);
+
+  font-size: calc(1em * #{$input-floating-label-scale});
+
+  opacity: 0;
+  pointer-events: none;
+}
+
+:host(.input-fill-outline) .input-outline-start {
+  @include border-radius(var(--border-radius), 0px, 0px, var(--border-radius));
+  @include border(null, null, null, var(--border-width) var(--border-style) var(--border-color));
+
+  /**
+   * There should be spacing between the translated text
+   * and .input-outline-start. However, we can't add this
+   * spacing onto the notch because it would cause the
+   * label to look like it is not aligned with the
+   * text input. Instead, we subtract a few pixels from
+   * this element.
+   */
+  width: calc(var(--padding-start) - #{$input-md-floating-label-padding});
 }
 
 :host(.input-fill-outline) .input-outline-end {
@@ -163,7 +208,6 @@
  */
 :host(.has-focus.input-fill-outline.input-label-placement-floating) .input-outline-notch,
 :host(.has-value.input-fill-outline.input-label-placement-floating) .input-outline-notch,
-:host(.input-fill-outline.input-label-placement-stacked) .input-outline-notch,
 :host(.input-fill-outline.input-label-placement-stacked) .input-outline-notch {
   border-top: none;
 }
diff --git a/core/src/components/input/input.md.solid.scss b/core/src/components/input/input.md.solid.scss
index 9aba43a7d2e..d7ee9c7da43 100644
--- a/core/src/components/input/input.md.solid.scss
+++ b/core/src/components/input/input.md.solid.scss
@@ -1,3 +1,5 @@
+@import "./input.vars";
+
 // Input Fill: Solid
 // ----------------------------------------------------------------
 
@@ -59,3 +61,16 @@
    */
   @include border-radius(var(--border-radius), var(--border-radius), 0px, 0px);
 }
+
+// Input Label
+// ----------------------------------------------------------------
+
+:host(.input-fill-solid.input-label-placement-stacked) .label-text-wrapper,
+:host(.has-focus.input-fill-solid.input-label-placement-floating) .label-text-wrapper,
+:host(.has-value.input-fill-solid.input-label-placement-floating) .label-text-wrapper {
+  /**
+   * Label text should not extend
+   * beyond the bounds of the input.
+   */
+  max-width: calc(100% / #{$input-floating-label-scale});
+}
diff --git a/core/src/components/input/input.md.vars.scss b/core/src/components/input/input.md.vars.scss
index b04a35040ff..42bbb195626 100644
--- a/core/src/components/input/input.md.vars.scss
+++ b/core/src/components/input/input.md.vars.scss
@@ -75,3 +75,6 @@ $input-md-inset-margin-bottom:            ($item-md-padding-bottom * 0.5) !defau
 
 /// @prop - Margin start of the inset input
 $input-md-inset-margin-start:             $item-md-padding-start !default;
+
+/// @prop - The amount of whitespace to display on either side of the floating label
+$input-md-floating-label-padding:         4px !default;
diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss
index 81cd317dda8..d8338c0fb5f 100644
--- a/core/src/components/input/input.scss
+++ b/core/src/components/input/input.scss
@@ -393,13 +393,6 @@
 // ----------------------------------------------------------------
 
 .label-text-wrapper {
-  /**
-   * The margin between the label and
-   * the input should be on the end
-   * when the label sits at the start.
-   */
-  @include margin(0, 8px, 0, 0);
-
   /**
    * This causes the label to take up
    * the entire height of its container
@@ -409,6 +402,16 @@
 
   align-items: center;
 
+  /**
+   * Label text should not extend
+   * beyond the bounds of the input.
+   * However, we do not set the max
+   * width to 100% because then
+   * only the label would show and users
+   * would not be able to see what they are typing.
+   */
+  max-width: 200px;
+
   transition: color 150ms cubic-bezier(.4, 0, .2, 1), transform 150ms cubic-bezier(.4, 0, .2, 1);
 
   /**
@@ -460,6 +463,15 @@
   flex-direction: row;
 }
 
+:host(.input-label-placement-start) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the input should be on the end
+   * when the label sits at the start.
+   */
+  @include margin(0, 8px, 0, 0);
+}
+
 // Input Label Placement - End
 // ----------------------------------------------------------------
 
@@ -483,6 +495,15 @@
 // Input Label Placement - Fixed
 // ----------------------------------------------------------------
 
+:host(.input-label-placement-fixed) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the input should be on the end
+   * when the label sits at the start.
+   */
+  @include margin(0, 8px, 0, 0);
+}
+
 /**
  * Label is on the left of the input in LTR and
  * on the right in RTL. Label also has a fixed width.
@@ -519,6 +540,8 @@
 :host(.input-label-placement-stacked) .label-text-wrapper,
 :host(.input-label-placement-floating) .label-text-wrapper {
   @include transform-origin(start, top);
+
+  max-width: 100%;
 }
 
 /**
@@ -559,4 +582,10 @@
 :host(.has-focus.input-label-placement-floating) .label-text-wrapper,
 :host(.has-value.input-label-placement-floating) .label-text-wrapper {
   @include transform(translateY(50%), scale(.75));
+
+  /**
+   * Label text should not extend
+   * beyond the bounds of the input.
+   */
+  max-width: calc(100% / #{$input-floating-label-scale});
 }
diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index 07c4f0cfe09..0e42a2a31af 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -572,28 +572,28 @@ export class Input implements ComponentInterface {
    * when fill="outline".
    */
   private renderLabelContainer() {
-    const { labelPlacement } = this;
-    const hasOutlineFill = this.fill === 'outline';
-    const needsNotch = labelPlacement === 'floating' || labelPlacement === 'stacked';
+    const mode = getIonMode(this);
+    const hasOutlineFill = mode === 'md' && this.fill === 'outline';
 
     if (hasOutlineFill) {
       /**
        * The outline fill has a special outline
        * that appears around the input and the label.
-       * Certain label placements cause the
+       * Certain stacked and floating label placements cause the
        * label to translate up and create a "cut out"
-       * inside of that border. When this happens, we need
-       * to render the label inside of the input-outline-notch
-       * element. Otherwise, we can render it as a sibling
-       * of the outline container.
+       * inside of that border by using the notch-spacer element.
        */
       return [
         <div class="input-outline-container">
           <div class="input-outline-start"></div>
-          <div class="input-outline-notch">{needsNotch && this.renderLabel()}</div>
+          <div class="input-outline-notch">
+            <div class="notch-spacer" aria-hidden="true">
+              {this.label}
+            </div>
+          </div>
           <div class="input-outline-end"></div>
         </div>,
-        !needsNotch && this.renderLabel(),
+        this.renderLabel(),
       ];
     }
 
diff --git a/core/src/components/input/input.vars.scss b/core/src/components/input/input.vars.scss
index e21c162d176..abf0e2ca89d 100644
--- a/core/src/components/input/input.vars.scss
+++ b/core/src/components/input/input.vars.scss
@@ -1 +1,4 @@
 @import "../../themes/ionic.globals";
+
+/// @prop - How much to scale the floating label by
+$input-floating-label-scale: 0.75 !default;
diff --git a/core/src/components/input/test/fill/input.e2e.ts b/core/src/components/input/test/fill/input.e2e.ts
index bb9c3e15f90..c9d7c83f96a 100644
--- a/core/src/components/input/test/fill/input.e2e.ts
+++ b/core/src/components/input/test/fill/input.e2e.ts
@@ -22,6 +22,24 @@ test.describe('input: fill', () => {
       const input = page.locator('ion-input');
       expect(await input.screenshot()).toMatchSnapshot(`input-fill-solid-${page.getSnapshotSettings()}.png`);
     });
+    test('should render correctly with floating label', async ({ page }) => {
+      await page.setContent(`
+        <ion-input
+          fill="solid"
+          label="Email"
+          label-placement="floating"
+          value="hi@ionic.io"
+          helper-text="Enter your email"
+          maxlength="20"
+          counter="true"
+        ></ion-input>
+      `);
+
+      const input = page.locator('ion-input');
+      expect(await input.screenshot()).toMatchSnapshot(
+        `input-fill-solid-label-floating-${page.getSnapshotSettings()}.png`
+      );
+    });
     test('should not have visual regressions with shaped solid', async ({ page }) => {
       await page.setContent(`
         <ion-input
@@ -38,6 +56,33 @@ test.describe('input: fill', () => {
       const input = page.locator('ion-input');
       expect(await input.screenshot()).toMatchSnapshot(`input-fill-shaped-solid-${page.getSnapshotSettings()}.png`);
     });
+    test('padding and border radius should be customizable', async ({ page }) => {
+      await page.setContent(`
+        <style>
+          ion-input {
+            --border-radius: 10px !important;
+            --padding-start: 50px !important;
+            --padding-end: 50px !important;
+          }
+        </style>
+
+        <ion-input
+          shape="round"
+          fill="solid"
+          label="Email"
+          label-placement="floating"
+          value="hi@ionic.io"
+          helper-text="Enter your email"
+          maxlength="20"
+          counter="true"
+        ></ion-input>
+      `);
+
+      const input = page.locator('ion-input');
+      expect(await input.screenshot()).toMatchSnapshot(
+        `input-fill-shaped-solid-custom-${page.getSnapshotSettings()}.png`
+      );
+    });
   });
   test.describe('input: fill outline', () => {
     test('should not have visual regressions', async ({ page }) => {
@@ -55,6 +100,24 @@ test.describe('input: fill', () => {
       const input = page.locator('ion-input');
       expect(await input.screenshot()).toMatchSnapshot(`input-fill-outline-${page.getSnapshotSettings()}.png`);
     });
+    test('should render correctly with floating label', async ({ page }) => {
+      await page.setContent(`
+        <ion-input
+          fill="outline"
+          label="Email"
+          label-placement="floating"
+          value="hi@ionic.io"
+          helper-text="Enter your email"
+          maxlength="20"
+          counter="true"
+        ></ion-input>
+      `);
+
+      const input = page.locator('ion-input');
+      expect(await input.screenshot()).toMatchSnapshot(
+        `input-fill-outline-label-floating-${page.getSnapshotSettings()}.png`
+      );
+    });
     test('should not have visual regressions with shaped outline', async ({ page }) => {
       await page.setContent(`
         <ion-input
@@ -71,5 +134,32 @@ test.describe('input: fill', () => {
       const input = page.locator('ion-input');
       expect(await input.screenshot()).toMatchSnapshot(`input-fill-shaped-outline-${page.getSnapshotSettings()}.png`);
     });
+    test('padding and border radius should be customizable', async ({ page }) => {
+      await page.setContent(`
+        <style>
+          ion-input {
+            --border-radius: 10px !important;
+            --padding-start: 50px !important;
+            --padding-end: 50px !important;
+          }
+        </style>
+
+        <ion-input
+          shape="round"
+          fill="outline"
+          label="Email"
+          label-placement="floating"
+          value="hi@ionic.io"
+          helper-text="Enter your email"
+          maxlength="20"
+          counter="true"
+        ></ion-input>
+      `);
+
+      const input = page.locator('ion-input');
+      expect(await input.screenshot()).toMatchSnapshot(
+        `input-fill-shaped-outline-custom-${page.getSnapshotSettings()}.png`
+      );
+    });
   });
 });
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-floating-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-floating-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..e10a59ef99d
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-floating-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-floating-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-floating-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..929079cf052
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-floating-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-floating-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-floating-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..29685999486
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-floating-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-floating-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-floating-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..b281509e647
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-floating-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-floating-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-floating-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..97b3ea3e3cb
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-floating-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-floating-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-floating-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..92cb9cac923
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-floating-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-outline-custom-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-outline-custom-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..90a70034e5f
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-outline-custom-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-outline-custom-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-outline-custom-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..57c01969362
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-outline-custom-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-outline-custom-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-outline-custom-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..83d6bf22cf9
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-outline-custom-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-outline-custom-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-outline-custom-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..7de78c89311
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-outline-custom-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-outline-custom-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-outline-custom-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..facf7dbbc1f
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-outline-custom-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-outline-custom-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-outline-custom-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..fbe285d9da4
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-outline-custom-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-solid-custom-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-solid-custom-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..505958e9178
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-solid-custom-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-solid-custom-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-solid-custom-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..f58380f933f
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-solid-custom-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-solid-custom-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-solid-custom-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..9f883bd8018
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-solid-custom-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-solid-custom-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-solid-custom-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..f8a2900e8a8
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-solid-custom-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-solid-custom-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-solid-custom-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..4e52c2d1964
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-solid-custom-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-solid-custom-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-solid-custom-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..2710af92cb5
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-shaped-solid-custom-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-solid-label-floating-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-solid-label-floating-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..b265b322d5b
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-solid-label-floating-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-solid-label-floating-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-solid-label-floating-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..604952444c7
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-solid-label-floating-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-solid-label-floating-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-solid-label-floating-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..e0bfe1b0f77
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-solid-label-floating-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-solid-label-floating-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-solid-label-floating-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..9445441ef4b
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-solid-label-floating-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-solid-label-floating-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-solid-label-floating-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..dc6cbc1c721
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-solid-label-floating-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-solid-label-floating-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-solid-label-floating-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..c2bf07d1ee7
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-solid-label-floating-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts b/core/src/components/input/test/label-placement/input.e2e.ts
index 65c03c94122..cc9431df758 100644
--- a/core/src/components/input/test/label-placement/input.e2e.ts
+++ b/core/src/components/input/test/label-placement/input.e2e.ts
@@ -10,6 +10,16 @@ test.describe('input: label placement start', () => {
     const input = page.locator('ion-input');
     expect(await input.screenshot()).toMatchSnapshot(`input-placement-start-${page.getSnapshotSettings()}.png`);
   });
+
+  test('long label should truncate', async ({ page }) => {
+    await page.setContent(`
+      <ion-input label="Email Email Email Email Email Email Email Email Email Email Email Email" value="example@ionic.io" label-placement="start"></ion-input>
+    `);
+    const input = page.locator('ion-input');
+    expect(await input.screenshot()).toMatchSnapshot(
+      `input-placement-start-long-label-${page.getSnapshotSettings()}.png`
+    );
+  });
 });
 
 test.describe('input: label placement end', () => {
@@ -21,6 +31,15 @@ test.describe('input: label placement end', () => {
     const input = page.locator('ion-input');
     expect(await input.screenshot()).toMatchSnapshot(`input-placement-end-${page.getSnapshotSettings()}.png`);
   });
+  test('long label should truncate', async ({ page }) => {
+    await page.setContent(`
+      <ion-input label="Email Email Email Email Email Email Email Email Email Email Email Email" value="example@ionic.io" label-placement="end"></ion-input>
+    `);
+    const input = page.locator('ion-input');
+    expect(await input.screenshot()).toMatchSnapshot(
+      `input-placement-end-long-label-${page.getSnapshotSettings()}.png`
+    );
+  });
 });
 
 test.describe('input: label placement fixed', () => {
@@ -55,6 +74,15 @@ test.describe('input: label placement stacked', () => {
       `input-placement-stacked-no-value-${page.getSnapshotSettings()}.png`
     );
   });
+  test('long label should truncate', async ({ page }) => {
+    await page.setContent(`
+      <ion-input label="Email Email Email Email Email Email Email Email Email Email Email Email" value="example@ionic.io" label-placement="stacked"></ion-input>
+    `);
+    const input = page.locator('ion-input');
+    expect(await input.screenshot()).toMatchSnapshot(
+      `input-placement-stacked-long-label-${page.getSnapshotSettings()}.png`
+    );
+  });
 });
 
 test.describe('input: label placement floating', () => {
@@ -93,4 +121,34 @@ test.describe('input: label placement floating', () => {
       `input-focused-placement-floating-no-value-${page.getSnapshotSettings()}.png`
     );
   });
+  test('long label should truncate', async ({ page }) => {
+    await page.setContent(`
+      <ion-input label="Email Email Email Email Email Email Email Email Email Email Email Email" value="example@ionic.io" label-placement="floating"></ion-input>
+    `);
+    const input = page.locator('ion-input');
+    expect(await input.screenshot()).toMatchSnapshot(
+      `input-placement-floating-long-label-${page.getSnapshotSettings()}.png`
+    );
+  });
+
+  test('long label should truncate with outline', async ({ page, skip }) => {
+    skip.mode('ios', 'This style only appears on MD');
+    await page.setContent(`
+      <ion-input fill="outline" label="Email Email Email Email Email Email Email Email Email Email Email Email" value="example@ionic.io" label-placement="floating"></ion-input>
+    `);
+    const input = page.locator('ion-input');
+    expect(await input.screenshot()).toMatchSnapshot(
+      `input-placement-floating-long-label-outline-${page.getSnapshotSettings()}.png`
+    );
+  });
+  test('long label should truncate with solid', async ({ page, skip }) => {
+    skip.mode('ios', 'This style only appears on MD');
+    await page.setContent(`
+      <ion-input fill="solid" label="Email Email Email Email Email Email Email Email Email Email Email Email" value="example@ionic.io" label-placement="floating"></ion-input>
+    `);
+    const input = page.locator('ion-input');
+    expect(await input.screenshot()).toMatchSnapshot(
+      `input-placement-floating-long-label-solid-${page.getSnapshotSettings()}.png`
+    );
+  });
 });
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..a7064b4b67e
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..cfcd07def9b
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..c3f0abd6d2a
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..2206d9a29de
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..bf6ddfda913
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..8271968604e
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..dcc1b0b2774
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..207166e210a
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..20a296d3843
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..66dfa2779e5
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..9f7abb1af0c
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..a4db99f94ef
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..ed7fea78372
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..fc58277d876
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..fcdbb4e7878
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..728729f9d5c
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..41f3ab8efd5
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..d0f0381361e
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..75e675dbcf3
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..d5fdfd5bbe2
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..216cfd37ecf
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..902ac496bb0
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..f845477a535
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..72f130494ed
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-outline-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-outline-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..1dee55a5fc6
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-outline-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-outline-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-outline-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..fbec1a8fe23
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-outline-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-outline-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-outline-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..839f7e65822
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-outline-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-outline-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-outline-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..c88958035b1
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-outline-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-outline-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-outline-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..187961bbac7
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-outline-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-outline-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-outline-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..a17057970cd
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-outline-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-solid-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-solid-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..153b0c111a4
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-solid-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-solid-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-solid-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..8b237a7a74d
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-solid-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-solid-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-solid-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..d7ae7ebb6ae
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-solid-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-solid-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-solid-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..5de06af7282
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-solid-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-solid-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-solid-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..cdf9c1c93de
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-solid-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-solid-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-solid-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..1eabb698146
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-solid-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..ed7fea78372
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..fc58277d876
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..fcdbb4e7878
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..728729f9d5c
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..41f3ab8efd5
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..d0f0381361e
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..75e675dbcf3
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..d5fdfd5bbe2
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..216cfd37ecf
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..902ac496bb0
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..f845477a535
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..72f130494ed
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..1b7b11f7cd5
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..37821f629b7
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..646749fde11
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..65a3f5871f0
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..d42dd70cc8b
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..4bc8a926de6
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..8adca3fd71b
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..57ce5d2eb53
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..fcd1dd648f5
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..faf7026a620
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..5f63dfb6c28
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..4ab11ed4857
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-rtl-Mobile-Safari-linux.png differ