diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index c17d097daf..b65f10b179 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -1214,7 +1214,7 @@ export namespace Components {
          */
         "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
         /**
-          * The visible label associated with the input.
+          * The visible label associated with the input.  Use this if you need to render a plaintext label.  The `label` property will take priority over the `label` slot if both are used.
          */
         "label"?: string;
         /**
@@ -5248,7 +5248,7 @@ declare namespace LocalJSX {
          */
         "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
         /**
-          * The visible label associated with the input.
+          * The visible label associated with the input.  Use this if you need to render a plaintext label.  The `label` property will take priority over the `label` slot if both are used.
          */
         "label"?: string;
         /**
diff --git a/core/src/components/input/input.md.outline.scss b/core/src/components/input/input.md.outline.scss
index 30367cf807..4efbd2fcdd 100644
--- a/core/src/components/input/input.md.outline.scss
+++ b/core/src/components/input/input.md.outline.scss
@@ -172,6 +172,16 @@
 
   opacity: 0;
   pointer-events: none;
+
+  /**
+   * The spacer currently inherits
+   * border-box sizing from the Ionic reset styles.
+   * However, we do not want to include padding in
+   * the calculation of the element dimensions.
+   * This code can be removed if input is updated
+   * to use the Shadow DOM.
+   */
+  box-sizing: content-box;
 }
 
 :host(.input-fill-outline) .input-outline-start {
diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss
index ab0cf76b37..4a18956e01 100644
--- a/core/src/components/input/input.scss
+++ b/core/src/components/input/input.scss
@@ -463,7 +463,8 @@
  * works on block-level elements. A flex item is
  * considered blockified (https://www.w3.org/TR/css-display-3/#blockify).
  */
-.label-text {
+.label-text,
+::slotted([slot="label"]) {
   text-overflow: ellipsis;
 
   white-space: nowrap;
@@ -471,6 +472,16 @@
   overflow: hidden;
 }
 
+/**
+ * If no label text is placed into the slot
+ * then the element should be hidden otherwise
+ * there will be additional margins added.
+ */
+.label-text-wrapper-hidden,
+.input-outline-notch-hidden {
+  display: none;
+}
+
 .input-wrapper input {
   /**
    * When the floating label appears on top of the
diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index e76bf1dafc..7e138469ab 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -1,10 +1,12 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Build, Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
-import type { LegacyFormController } from '@utils/forms';
-import { createLegacyFormController } from '@utils/forms';
+import { Build, Component, Element, Event, Host, Method, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
+import type { LegacyFormController, NotchController } from '@utils/forms';
+import { createLegacyFormController, createNotchController } from '@utils/forms';
 import type { Attributes } from '@utils/helpers';
 import { inheritAriaAttributes, debounceEvent, findItemLabel, inheritAttributes } from '@utils/helpers';
 import { printIonWarning } from '@utils/logging';
+import { createSlotMutationController } from '@utils/slot-mutation-controller';
+import type { SlotMutationController } from '@utils/slot-mutation-controller';
 import { createColorClasses, hostContext } from '@utils/theme';
 import { closeCircle, closeSharp } from 'ionicons/icons';
 
@@ -16,6 +18,8 @@ import { getCounterText } from './input.utils';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ *
+ * @slot label - The label text to associate with the input. Use the `labelPlacement` property to control where the label is placed relative to the input. Use this if you need to render a label with custom HTML. (EXPERIMENTAL)
  */
 @Component({
   tag: 'ion-input',
@@ -31,6 +35,9 @@ export class Input implements ComponentInterface {
   private inheritedAttributes: Attributes = {};
   private isComposing = false;
   private legacyFormController!: LegacyFormController;
+  private slotMutationController?: SlotMutationController;
+  private notchController?: NotchController;
+  private notchSpacerEl: HTMLElement | undefined;
 
   // This flag ensures we log the deprecation warning at most once.
   private hasLoggedDeprecationWarning = false;
@@ -165,6 +172,10 @@ export class Input implements ComponentInterface {
 
   /**
    * The visible label associated with the input.
+   *
+   * Use this if you need to render a plaintext label.
+   *
+   * The `label` property will take priority over the `label` slot if both are used.
    */
   @Prop() label?: string;
 
@@ -353,6 +364,12 @@ export class Input implements ComponentInterface {
     const { el } = this;
 
     this.legacyFormController = createLegacyFormController(el);
+    this.slotMutationController = createSlotMutationController(el, 'label', () => forceUpdate(this));
+    this.notchController = createNotchController(
+      el,
+      () => this.notchSpacerEl,
+      () => this.labelSlot
+    );
 
     this.emitStyle();
     this.debounceChanged();
@@ -369,6 +386,10 @@ export class Input implements ComponentInterface {
     this.originalIonInput = this.ionInput;
   }
 
+  componentDidRender() {
+    this.notchController?.calculateNotchWidth();
+  }
+
   disconnectedCallback() {
     if (Build.isBrowser) {
       document.dispatchEvent(
@@ -377,6 +398,16 @@ export class Input implements ComponentInterface {
         })
       );
     }
+
+    if (this.slotMutationController) {
+      this.slotMutationController.destroy();
+      this.slotMutationController = undefined;
+    }
+
+    if (this.notchController) {
+      this.notchController.destroy();
+      this.notchController = undefined;
+    }
   }
 
   /**
@@ -578,17 +609,37 @@ export class Input implements ComponentInterface {
 
   private renderLabel() {
     const { label } = this;
-    if (label === undefined) {
-      return;
-    }
 
     return (
-      <div class="label-text-wrapper">
-        <div class="label-text">{this.label}</div>
+      <div
+        class={{
+          'label-text-wrapper': true,
+          'label-text-wrapper-hidden': !this.hasLabel,
+        }}
+      >
+        {label === undefined ? <slot name="label"></slot> : <div class="label-text">{label}</div>}
       </div>
     );
   }
 
+  /**
+   * Gets any content passed into the `label` slot,
+   * not the <slot> definition.
+   */
+  private get labelSlot() {
+    return this.el.querySelector('[slot="label"]');
+  }
+
+  /**
+   * Returns `true` if label content is provided
+   * either by a prop or a content. If you want
+   * to get the plaintext value of the label use
+   * the `labelText` getter instead.
+   */
+  private get hasLabel() {
+    return this.label !== undefined || this.labelSlot !== null;
+  }
+
   /**
    * Renders the border container
    * when fill="outline".
@@ -608,8 +659,13 @@ export class Input implements ComponentInterface {
       return [
         <div class="input-outline-container">
           <div class="input-outline-start"></div>
-          <div class="input-outline-notch">
-            <div class="notch-spacer" aria-hidden="true">
+          <div
+            class={{
+              'input-outline-notch': true,
+              'input-outline-notch-hidden': !this.hasLabel,
+            }}
+          >
+            <div class="notch-spacer" aria-hidden="true" ref={(el) => (this.notchSpacerEl = el)}>
               {this.label}
             </div>
           </div>
diff --git a/core/src/components/input/test/a11y/index.html b/core/src/components/input/test/a11y/index.html
index 7ee00c06a2..acbcdaa333 100644
--- a/core/src/components/input/test/a11y/index.html
+++ b/core/src/components/input/test/a11y/index.html
@@ -15,6 +15,7 @@
     <main>
       <h1>Input - a11y</h1>
 
+      <ion-input><div slot="label">Slotted Label</div></ion-input><br />
       <ion-input label="my label"></ion-input><br />
       <ion-input aria-label="my aria label"></ion-input><br />
       <ion-input label="Email" label-placement="stacked" value="hi@ionic.io"></ion-input><br />
diff --git a/core/src/components/input/test/fill/input.e2e.ts b/core/src/components/input/test/fill/input.e2e.ts
index 7688efdf71..2a7f949f2d 100644
--- a/core/src/components/input/test/fill/input.e2e.ts
+++ b/core/src/components/input/test/fill/input.e2e.ts
@@ -180,3 +180,71 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('input: label slot'), () => {
+    test('should render the notch correctly with a slotted label', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          .custom-label {
+            font-size: 30px;
+          }
+        </style>
+        <ion-input
+          fill="outline"
+          label-placement="stacked"
+          value="apple"
+        >
+          <div slot="label" class="custom-label">My Label Content</div>
+        </ion-input>
+      `,
+        config
+      );
+
+      const input = page.locator('ion-input');
+      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-fill-outline-slotted-label`));
+    });
+    test('should render the notch correctly with a slotted label after the input was originally hidden', async ({
+      page,
+    }) => {
+      await page.setContent(
+        `
+        <style>
+          .custom-label {
+            font-size: 30px;
+          }
+        </style>
+        <ion-input
+          fill="outline"
+          label-placement="stacked"
+          value="apple"
+          style="display: none"
+        >
+          <div slot="label" class="custom-label">My Label Content</div>
+        </ion-input>
+      `,
+        config
+      );
+
+      const input = page.locator('ion-input');
+
+      await input.evaluate((el: HTMLIonSelectElement) => el.style.removeProperty('display'));
+
+      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-fill-outline-hidden-slotted-label`));
+    });
+  });
+  test.describe(title('input: notch cutout'), () => {
+    test('notch cutout should be hidden when no label is passed', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-input fill="outline" label-placement="stacked" aria-label="my input"></ion-input>
+      `,
+        config
+      );
+
+      const notchCutout = page.locator('ion-input .input-outline-notch');
+      await expect(notchCutout).toBeHidden();
+    });
+  });
+});
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-hidden-slotted-label-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-hidden-slotted-label-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..39518074a1
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-hidden-slotted-label-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-hidden-slotted-label-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-hidden-slotted-label-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..51ddf40411
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-hidden-slotted-label-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-hidden-slotted-label-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-hidden-slotted-label-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..991042ab59
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-hidden-slotted-label-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-slotted-label-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-slotted-label-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..39518074a1
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-slotted-label-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-slotted-label-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-slotted-label-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..51ddf40411
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-slotted-label-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-slotted-label-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-slotted-label-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..991042ab59
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-slotted-label-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/input.spec.ts b/core/src/components/input/test/input.spec.ts
index 599c305aec..e7b39a451d 100644
--- a/core/src/components/input/test/input.spec.ts
+++ b/core/src/components/input/test/input.spec.ts
@@ -44,3 +44,57 @@ describe('input: rendering', () => {
     expect(bottomContent).toBe(null);
   });
 });
+
+/**
+ * Input uses emulated slots, so the internal
+ * behavior will not exactly match Select's slots.
+ * For example, Input does not render an actual `<slot>` element
+ * internally, so we do not check for that here. Instead,
+ * we check to see which label text is being used.
+ * If Input is updated to use Shadow DOM (and therefore native slots),
+ * then we can update these tests to more closely match the Select tests.
+ **/
+describe('input: label rendering', () => {
+  it('should render label prop if only prop provided', async () => {
+    const page = await newSpecPage({
+      components: [Input],
+      html: `
+        <ion-input label="Label Prop Text"></ion-input>
+      `,
+    });
+
+    const input = page.body.querySelector('ion-input');
+
+    const labelText = input.querySelector('.label-text-wrapper');
+
+    expect(labelText.textContent).toBe('Label Prop Text');
+  });
+  it('should render label slot if only slot provided', async () => {
+    const page = await newSpecPage({
+      components: [Input],
+      html: `
+        <ion-input><div slot="label">Label Slot Text</div></ion-input>
+      `,
+    });
+
+    const input = page.body.querySelector('ion-input');
+
+    const labelText = input.querySelector('.label-text-wrapper');
+
+    expect(labelText.textContent).toBe('Label Slot Text');
+  });
+  it('should render label prop if both prop and slot provided', async () => {
+    const page = await newSpecPage({
+      components: [Input],
+      html: `
+        <ion-input label="Label Prop Text"><div slot="label">Label Slot Text</div></ion-input>
+      `,
+    });
+
+    const input = page.body.querySelector('ion-input');
+
+    const labelText = input.querySelector('.label-text-wrapper');
+
+    expect(labelText.textContent).toBe('Label Prop Text');
+  });
+});
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 eb0698fbf7..218e718a3d 100644
--- a/core/src/components/input/test/label-placement/input.e2e.ts
+++ b/core/src/components/input/test/label-placement/input.e2e.ts
@@ -14,17 +14,6 @@ configs().forEach(({ title, screenshot, config }) => {
       const input = page.locator('ion-input');
       expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-placement-start`));
     });
-
-    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>
-      `,
-        config
-      );
-      const input = page.locator('ion-input');
-      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-placement-start-long-label`));
-    });
   });
   test.describe(title('input: label placement end'), () => {
     test('label should appear on the ending side of the input', async ({ page }) => {
@@ -38,16 +27,6 @@ configs().forEach(({ title, screenshot, config }) => {
       const input = page.locator('ion-input');
       expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-placement-end`));
     });
-    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>
-      `,
-        config
-      );
-      const input = page.locator('ion-input');
-      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-placement-end-long-label`));
-    });
   });
   test.describe(title('input: label placement fixed'), () => {
     test('label should appear on the starting side of the input, have a fixed width, and show ellipses', async ({
@@ -179,3 +158,59 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('input: label overflow'), () => {
+    test('label property should be truncated with an ellipsis', async ({ page }) => {
+      await page.setContent(
+        `
+            <ion-input label="Label Label Label Label Label" placeholder="Text Input"></ion-input>
+          `,
+        config
+      );
+
+      const input = page.locator('ion-input');
+      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-label-truncate`));
+    });
+    test('label slot should be truncated with an ellipsis', async ({ page }) => {
+      await page.setContent(
+        `
+            <ion-input placeholder="Text Input">
+              <div slot="label">Label Label Label Label Label</div>
+            </ion-input>
+          `,
+        config
+      );
+
+      const input = page.locator('ion-input');
+      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-label-slot-truncate`));
+    });
+  });
+});
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('input: async label'), () => {
+    test('input should re-render when label slot is added async', async ({ page }) => {
+      await page.setContent(
+        `
+            <ion-input fill="solid" label-placement="stacked" placeholder="Text Input"></ion-input>
+          `,
+        config
+      );
+
+      const input = page.locator('ion-input');
+
+      await input.evaluate((el: HTMLIonInputElement) => {
+        const labelEl = document.createElement('div');
+        labelEl.slot = 'label';
+        labelEl.innerHTML = 'Email <span class="required" style="color: red">*</span';
+
+        el.appendChild(labelEl);
+      });
+
+      await page.waitForChanges();
+
+      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-async-label`));
+    });
+  });
+});
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-async-label-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-async-label-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..f0b40be26b
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-async-label-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-async-label-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-async-label-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..1383751717
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-async-label-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-async-label-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-async-label-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..683686680d
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-async-label-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-slot-truncate-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-slot-truncate-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..8bd05c624c
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-slot-truncate-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-slot-truncate-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-slot-truncate-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..259c9dbf1b
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-slot-truncate-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-slot-truncate-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-slot-truncate-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..c3b05b1c43
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-slot-truncate-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-truncate-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-truncate-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..8bd05c624c
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-truncate-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-truncate-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-truncate-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..259c9dbf1b
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-truncate-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-truncate-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-truncate-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..c3b05b1c43
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-truncate-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-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
deleted file mode 100644
index a7064b4b67..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-ltr-Mobile-Chrome-linux.png and /dev/null 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
deleted file mode 100644
index cfcd07def9..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-ltr-Mobile-Firefox-linux.png and /dev/null 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
deleted file mode 100644
index c3f0abd6d2..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-ltr-Mobile-Safari-linux.png and /dev/null 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
deleted file mode 100644
index 2206d9a29d..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-rtl-Mobile-Chrome-linux.png and /dev/null 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
deleted file mode 100644
index bf6ddfda91..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-rtl-Mobile-Firefox-linux.png and /dev/null 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
deleted file mode 100644
index 7b49bc8636..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-rtl-Mobile-Safari-linux.png and /dev/null 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
deleted file mode 100644
index dcc1b0b277..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-ltr-Mobile-Chrome-linux.png and /dev/null 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
deleted file mode 100644
index 207166e210..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-ltr-Mobile-Firefox-linux.png and /dev/null 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
deleted file mode 100644
index 20a296d384..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-ltr-Mobile-Safari-linux.png and /dev/null 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
deleted file mode 100644
index 66dfa2779e..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-rtl-Mobile-Chrome-linux.png and /dev/null 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
deleted file mode 100644
index 9f7abb1af0..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-rtl-Mobile-Firefox-linux.png and /dev/null 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
deleted file mode 100644
index 40759ce6df..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-rtl-Mobile-Safari-linux.png and /dev/null 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
deleted file mode 100644
index b9e6710357..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-ltr-Mobile-Chrome-linux.png and /dev/null 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
deleted file mode 100644
index 25559e0adf..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-ltr-Mobile-Firefox-linux.png and /dev/null 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
deleted file mode 100644
index 7f7ec93642..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-ltr-Mobile-Safari-linux.png and /dev/null 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
deleted file mode 100644
index 1ef2c02d09..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-rtl-Mobile-Chrome-linux.png and /dev/null 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
deleted file mode 100644
index c1c0ff4291..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-rtl-Mobile-Firefox-linux.png and /dev/null 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
deleted file mode 100644
index df285daf58..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-rtl-Mobile-Safari-linux.png and /dev/null 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
deleted file mode 100644
index 3e0f6ffaca..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-ltr-Mobile-Chrome-linux.png and /dev/null 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
deleted file mode 100644
index 423c15b6d6..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-ltr-Mobile-Firefox-linux.png and /dev/null 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
deleted file mode 100644
index 5313e7f970..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-ltr-Mobile-Safari-linux.png and /dev/null 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
deleted file mode 100644
index 20f80eb91e..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-rtl-Mobile-Chrome-linux.png and /dev/null 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
deleted file mode 100644
index 5936a4c5b3..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-rtl-Mobile-Firefox-linux.png and /dev/null 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
deleted file mode 100644
index e8c47288c9..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-rtl-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/input/test/slot/index.html b/core/src/components/input/test/slot/index.html
new file mode 100644
index 0000000000..56b14181be
--- /dev/null
+++ b/core/src/components/input/test/slot/index.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Input - Slot</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;
+        }
+      }
+
+      .required {
+        color: red;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Input - Slot</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content" class="ion-padding">
+        <div class="grid">
+          <div class="grid-item">
+            <h2>No Fill / Start</h2>
+            <ion-input label-placement="start" value="hi@ionic.io">
+              <div slot="label">Email <span class="required">*</span></div>
+            </ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Solid / Start</h2>
+            <ion-input label-placement="start" fill="solid" value="hi@ionic.io">
+              <div slot="label">Email <span class="required">*</span></div>
+            </ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Outline / Start</h2>
+            <ion-input label-placement="start" fill="outline" value="hi@ionic.io">
+              <div slot="label">Email <span class="required">*</span></div>
+            </ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>No Fill / Floating</h2>
+            <ion-input label-placement="floating" value="hi@ionic.io">
+              <div slot="label">Email <span class="required">*</span></div>
+            </ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Solid / Floating</h2>
+            <ion-input label-placement="floating" fill="solid" value="hi@ionic.io">
+              <div slot="label">Email <span class="required">*</span></div>
+            </ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Outline / Floating</h2>
+            <ion-input label-placement="floating" fill="outline" value="hi@ionic.io">
+              <div slot="label">Email <span class="required">*</span></div>
+            </ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Outline / Floating / Async</h2>
+            <ion-input id="solid-async" label-placement="floating" fill="outline" value="hi@ionic.io"></ion-input>
+          </div>
+        </div>
+
+        <ion-button onclick="addSlot()">Add Slotted Content</ion-button>
+        <ion-button onclick="updateSlot()">Update Slotted Content</ion-button>
+        <ion-button onclick="removeSlot()">Remove Slotted Content</ion-button>
+      </ion-content>
+    </ion-app>
+
+    <script>
+      const solidAsync = document.querySelector('#solid-async');
+
+      const getSlottedContent = () => {
+        return solidAsync.querySelector('[slot="label"]');
+      };
+
+      const addSlot = () => {
+        if (getSlottedContent() === null) {
+          const labelEl = document.createElement('div');
+          labelEl.slot = 'label';
+          labelEl.innerHTML = 'Email <span class="required">*</span>';
+
+          solidAsync.appendChild(labelEl);
+        }
+      };
+
+      const removeSlot = () => {
+        if (getSlottedContent() !== null) {
+          solidAsync.querySelector('[slot="label"]').remove();
+        }
+      };
+
+      const updateSlot = () => {
+        const slottedContent = getSlottedContent();
+
+        if (slottedContent !== null) {
+          slottedContent.textContent = 'This is my really really really long text';
+        }
+      };
+    </script>
+  </body>
+</html>
diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx
index bdd705382e..49999a24f2 100644
--- a/core/src/components/select/select.tsx
+++ b/core/src/components/select/select.tsx
@@ -1,9 +1,8 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h, forceUpdate } from '@stencil/core';
-import { win } from '@utils/browser';
-import type { LegacyFormController } from '@utils/forms';
-import { createLegacyFormController } from '@utils/forms';
-import { findItemLabel, focusElement, getAriaLabel, renderHiddenInput, inheritAttributes, raf } from '@utils/helpers';
+import type { LegacyFormController, NotchController } from '@utils/forms';
+import { createLegacyFormController, createNotchController } from '@utils/forms';
+import { findItemLabel, focusElement, getAriaLabel, renderHiddenInput, inheritAttributes } from '@utils/helpers';
 import type { Attributes } from '@utils/helpers';
 import { printIonWarning } from '@utils/logging';
 import { actionSheetController, alertController, popoverController } from '@utils/overlays';
@@ -33,7 +32,7 @@ import type { SelectChangeEventDetail, SelectInterface, SelectCompareFn } from '
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
- * @slot label - The label text to associate with the select. Use the "labelPlacement" property to control where the label is placed relative to the select. Use this if you need to render a label with custom HTML.
+ * @slot label - The label text to associate with the select. Use the `labelPlacement` property to control where the label is placed relative to the select. Use this if you need to render a label with custom HTML.
  *
  * @part placeholder - The text displayed in the select when there is no value.
  * @part text - The displayed value of the select.
@@ -58,7 +57,8 @@ export class Select implements ComponentInterface {
   private inheritedAttributes: Attributes = {};
   private nativeWrapperEl: HTMLElement | undefined;
   private notchSpacerEl: HTMLElement | undefined;
-  private notchVisibilityIO: IntersectionObserver | undefined;
+
+  private notchController?: NotchController;
 
   // This flag ensures we log the deprecation warning at most once.
   private hasLoggedDeprecationWarning = false;
@@ -245,6 +245,11 @@ export class Select implements ComponentInterface {
     const { el } = this;
 
     this.legacyFormController = createLegacyFormController(el);
+    this.notchController = createNotchController(
+      el,
+      () => this.notchSpacerEl,
+      () => this.labelSlot
+    );
 
     this.updateOverlayOptions();
     this.emitStyle();
@@ -267,6 +272,11 @@ export class Select implements ComponentInterface {
       this.mutationO.disconnect();
       this.mutationO = undefined;
     }
+
+    if (this.notchController) {
+      this.notchController.destroy();
+      this.notchController = undefined;
+    }
   }
 
   /**
@@ -746,17 +756,7 @@ export class Select implements ComponentInterface {
   }
 
   componentDidRender() {
-    if (this.needsExplicitNotchWidth()) {
-      /**
-       * Run this the frame after
-       * the browser has re-painted the select.
-       * Otherwise, the label element may have a width
-       * of 0 and the IntersectionObserver will be used.
-       */
-      raf(() => {
-        this.setNotchWidth();
-      });
-    }
+    this.notchController?.calculateNotchWidth();
   }
 
   /**
@@ -777,120 +777,6 @@ export class Select implements ComponentInterface {
     return this.label !== undefined || this.labelSlot !== null;
   }
 
-  private needsExplicitNotchWidth() {
-    if (
-      /**
-       * If the notch is not being used
-       * then we do not need to set the notch width.
-       */
-      this.notchSpacerEl === undefined ||
-      /**
-       * If either the label property is being
-       * used or the label slot is not defined,
-       * then we do not need to estimate the notch width.
-       */
-      this.label !== undefined ||
-      this.labelSlot === null
-    ) {
-      return false;
-    }
-
-    return true;
-  }
-
-  /**
-   * When using a label prop we can render
-   * the label value inside of the notch and
-   * let the browser calculate the size of the notch.
-   * However, we cannot render the label slot in multiple
-   * places so we need to manually calculate the notch dimension
-   * based on the size of the slotted content.
-   *
-   * This function should only be used to set the notch width
-   * on slotted label content. The notch width for label prop
-   * content is automatically calculated based on the
-   * intrinsic size of the label text.
-   */
-  private setNotchWidth() {
-    const { el, notchSpacerEl } = this;
-
-    if (notchSpacerEl === undefined) {
-      return;
-    }
-
-    if (!this.needsExplicitNotchWidth()) {
-      notchSpacerEl.style.removeProperty('width');
-      return;
-    }
-
-    const width = this.labelSlot!.scrollWidth;
-    if (
-      /**
-       * If the computed width of the label is 0
-       * and notchSpacerEl's offsetParent is null
-       * then that means the element is hidden.
-       * As a result, we need to wait for the element
-       * to become visible before setting the notch width.
-       *
-       * We do not check el.offsetParent because
-       * that can be null if ion-select has
-       * position: fixed applied to it.
-       * notchSpacerEl does not have position: fixed.
-       */
-      width === 0 &&
-      notchSpacerEl.offsetParent === null &&
-      win !== undefined &&
-      'IntersectionObserver' in win
-    ) {
-      /**
-       * If there is an IO already attached
-       * then that will update the notch
-       * once the element becomes visible.
-       * As a result, there is no need to create
-       * another one.
-       */
-      if (this.notchVisibilityIO !== undefined) {
-        return;
-      }
-
-      const io = (this.notchVisibilityIO = new IntersectionObserver(
-        (ev) => {
-          /**
-           * If the element is visible then we
-           * can try setting the notch width again.
-           */
-          if (ev[0].intersectionRatio === 1) {
-            this.setNotchWidth();
-            io.disconnect();
-            this.notchVisibilityIO = undefined;
-          }
-        },
-        /**
-         * Set the root to be the select
-         * This causes the IO callback
-         * to be fired in WebKit as soon as the element
-         * is visible. If we used the default root value
-         * then WebKit would only fire the IO callback
-         * after any animations (such as a modal transition)
-         * finished, and there would potentially be a flicker.
-         */
-        { threshold: 0.01, root: el }
-      ));
-
-      io.observe(notchSpacerEl);
-      return;
-    }
-
-    /**
-     * If the element is visible then we can set the notch width.
-     * The notch is only visible when the label is scaled,
-     * which is why we multiply the width by 0.75 as this is
-     * the same amount the label element is scaled by in the
-     * select CSS (See $select-floating-label-scale in select.vars.scss).
-     */
-    notchSpacerEl.style.setProperty('width', `${width * 0.75}px`);
-  }
-
   /**
    * Renders the border container
    * when fill="outline".
diff --git a/core/src/utils/forms/index.ts b/core/src/utils/forms/index.ts
index d7c63744bd..f219f3978a 100644
--- a/core/src/utils/forms/index.ts
+++ b/core/src/utils/forms/index.ts
@@ -1 +1,2 @@
 export * from './form-controller';
+export * from './notch-controller';
diff --git a/core/src/utils/forms/notch-controller.ts b/core/src/utils/forms/notch-controller.ts
new file mode 100644
index 0000000000..1507f1f376
--- /dev/null
+++ b/core/src/utils/forms/notch-controller.ts
@@ -0,0 +1,177 @@
+import { win } from '@utils/browser';
+import { raf } from '@utils/helpers';
+
+type NotchElement = HTMLIonInputElement | HTMLIonSelectElement;
+
+/**
+ * A utility to calculate the size of an outline notch
+ * width relative to the content passed. This is used in
+ * components such as `ion-select` with `fill="outline"`
+ * where we need to pass slotted HTML content. This is not
+ * needed when rendering plaintext content because we can
+ * render the plaintext again hidden with `opacity: 0` inside
+ * of the notch. As a result we can rely on the intrinsic size
+ * of the element to correctly compute the notch width. We
+ * cannot do this with slotted content because we cannot project
+ * it into 2 places at once.
+ *
+ * @internal
+ * @param el: The host element
+ * @param getNotchSpacerEl: A function that returns a reference to the notch spacer element inside of the component template.
+ * @param getLabelSlot: A function that returns a reference to the slotted content.
+ */
+export const createNotchController = (
+  el: NotchElement,
+  getNotchSpacerEl: () => HTMLElement | undefined,
+  getLabelSlot: () => Element | null
+): NotchController => {
+  let notchVisibilityIO: IntersectionObserver | undefined;
+
+  const needsExplicitNotchWidth = () => {
+    const notchSpacerEl = getNotchSpacerEl();
+
+    if (
+      /**
+       * If the notch is not being used
+       * then we do not need to set the notch width.
+       */
+      notchSpacerEl === undefined ||
+      /**
+       * If either the label property is being
+       * used or the label slot is not defined,
+       * then we do not need to estimate the notch width.
+       */
+      el.label !== undefined ||
+      getLabelSlot() === null
+    ) {
+      return false;
+    }
+
+    return true;
+  };
+
+  const calculateNotchWidth = () => {
+    if (needsExplicitNotchWidth()) {
+      /**
+       * Run this the frame after
+       * the browser has re-painted the host element.
+       * Otherwise, the label element may have a width
+       * of 0 and the IntersectionObserver will be used.
+       */
+      raf(() => {
+        setNotchWidth();
+      });
+    }
+  };
+
+  /**
+   * When using a label prop we can render
+   * the label value inside of the notch and
+   * let the browser calculate the size of the notch.
+   * However, we cannot render the label slot in multiple
+   * places so we need to manually calculate the notch dimension
+   * based on the size of the slotted content.
+   *
+   * This function should only be used to set the notch width
+   * on slotted label content. The notch width for label prop
+   * content is automatically calculated based on the
+   * intrinsic size of the label text.
+   */
+  const setNotchWidth = () => {
+    const notchSpacerEl = getNotchSpacerEl();
+
+    if (notchSpacerEl === undefined) {
+      return;
+    }
+
+    if (!needsExplicitNotchWidth()) {
+      notchSpacerEl.style.removeProperty('width');
+      return;
+    }
+
+    const width = getLabelSlot()!.scrollWidth;
+
+    if (
+      /**
+       * If the computed width of the label is 0
+       * and notchSpacerEl's offsetParent is null
+       * then that means the element is hidden.
+       * As a result, we need to wait for the element
+       * to become visible before setting the notch width.
+       *
+       * We do not check el.offsetParent because
+       * that can be null if the host element has
+       * position: fixed applied to it.
+       * notchSpacerEl does not have position: fixed.
+       */
+      width === 0 &&
+      notchSpacerEl.offsetParent === null &&
+      win !== undefined &&
+      'IntersectionObserver' in win
+    ) {
+      /**
+       * If there is an IO already attached
+       * then that will update the notch
+       * once the element becomes visible.
+       * As a result, there is no need to create
+       * another one.
+       */
+      if (notchVisibilityIO !== undefined) {
+        return;
+      }
+
+      const io = (notchVisibilityIO = new IntersectionObserver(
+        (ev) => {
+          /**
+           * If the element is visible then we
+           * can try setting the notch width again.
+           */
+          if (ev[0].intersectionRatio === 1) {
+            setNotchWidth();
+            io.disconnect();
+            notchVisibilityIO = undefined;
+          }
+        },
+        /**
+         * Set the root to be the host element
+         * This causes the IO callback
+         * to be fired in WebKit as soon as the element
+         * is visible. If we used the default root value
+         * then WebKit would only fire the IO callback
+         * after any animations (such as a modal transition)
+         * finished, and there would potentially be a flicker.
+         */
+        { threshold: 0.01, root: el }
+      ));
+
+      io.observe(notchSpacerEl);
+      return;
+    }
+
+    /**
+     * If the element is visible then we can set the notch width.
+     * The notch is only visible when the label is scaled,
+     * which is why we multiply the width by 0.75 as this is
+     * the same amount the label element is scaled by in the host CSS.
+     * (For ion-select, see $select-floating-label-scale in select.vars.scss).
+     */
+    notchSpacerEl.style.setProperty('width', `${width * 0.75}px`);
+  };
+
+  const destroy = () => {
+    if (notchVisibilityIO) {
+      notchVisibilityIO.disconnect();
+      notchVisibilityIO = undefined;
+    }
+  };
+
+  return {
+    calculateNotchWidth,
+    destroy,
+  };
+};
+
+export type NotchController = {
+  calculateNotchWidth: () => void;
+  destroy: () => void;
+};
diff --git a/core/src/utils/slot-mutation-controller.ts b/core/src/utils/slot-mutation-controller.ts
new file mode 100644
index 0000000000..663b781a36
--- /dev/null
+++ b/core/src/utils/slot-mutation-controller.ts
@@ -0,0 +1,118 @@
+import { win } from '@utils/browser';
+import { raf } from '@utils/helpers';
+/**
+ * Used to update a scoped component that uses emulated slots. This fires when
+ * content is passed into the slot or when the content inside of a slot changes.
+ * This is not needed for components using native slots in the Shadow DOM.
+ * @internal
+ * @param el The host element to observe
+ * @param slotName mutationCallback will fire when nodes on this slot change
+ * @param mutationCallback The callback to fire whenever the slotted content changes
+ */
+export const createSlotMutationController = (
+  el: HTMLElement,
+  slotName: string,
+  mutationCallback: () => void
+): SlotMutationController => {
+  let hostMutationObserver: MutationObserver | undefined;
+  let slottedContentMutationObserver: MutationObserver | undefined;
+
+  if (win !== undefined && 'MutationObserver' in win) {
+    hostMutationObserver = new MutationObserver((entries) => {
+      for (const entry of entries) {
+        for (const node of entry.addedNodes) {
+          /**
+           * Check to see if the added node
+           *  is our slotted content.
+           */
+          if (node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).slot === slotName) {
+            /**
+             * If so, we want to watch the slotted
+             * content itself for changes. This lets us
+             * detect when content inside of the slot changes.
+             */
+            mutationCallback();
+
+            /**
+             * Adding the listener in an raf
+             * waits until Stencil moves the slotted element
+             * into the correct place in the event that
+             * slotted content is being added.
+             */
+            raf(() => watchForSlotChange(node as HTMLElement));
+            return;
+          }
+        }
+      }
+    });
+
+    hostMutationObserver.observe(el, {
+      childList: true,
+    });
+  }
+
+  /**
+   * Listen for changes inside of the slotted content.
+   * We can listen for subtree changes here to be
+   * informed of text within the slotted content
+   * changing. Doing this on the host is possible
+   * but it is much more expensive to do because
+   * it also listens for changes to the internals
+   * of the component.
+   */
+  const watchForSlotChange = (slottedEl: HTMLElement) => {
+    if (slottedContentMutationObserver) {
+      slottedContentMutationObserver.disconnect();
+      slottedContentMutationObserver = undefined;
+    }
+
+    slottedContentMutationObserver = new MutationObserver((entries) => {
+      mutationCallback();
+
+      for (const entry of entries) {
+        for (const node of entry.removedNodes) {
+          /**
+           * If the element was removed then we
+           * need to destroy the MutationObserver
+           * so the element can be garbage collected.
+           */
+          if (node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).slot === slotName) {
+            destroySlottedContentObserver();
+          }
+        }
+      }
+    });
+
+    /**
+     * Listen for changes inside of the element
+     * as well as anything deep in the tree.
+     * We listen on the parentElement so that we can
+     * detect when slotted element itself is removed.
+     */
+    slottedContentMutationObserver.observe(slottedEl.parentElement ?? slottedEl, { subtree: true, childList: true });
+  };
+
+  const destroy = () => {
+    if (hostMutationObserver) {
+      hostMutationObserver.disconnect();
+      hostMutationObserver = undefined;
+    }
+
+    destroySlottedContentObserver();
+  };
+
+  const destroySlottedContentObserver = () => {
+    if (slottedContentMutationObserver) {
+      slottedContentMutationObserver.disconnect();
+      slottedContentMutationObserver = undefined;
+    }
+  };
+
+  return {
+    destroy,
+  };
+};
+
+export type SlotMutationController = {
+  destroy: () => void;
+};