diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index dbbff605692..2dc919e41b1 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -13,8 +13,13 @@ import {
   forceUpdate,
   h,
 } from '@stencil/core';
-import type { NotchController, StartContainerController } from '@utils/forms';
-import { createNotchController, createStartContainerController, checkInvalidState } from '@utils/forms';
+import type { ClickController, NotchController, StartContainerController } from '@utils/forms';
+import {
+  createClickController,
+  createNotchController,
+  createStartContainerController,
+  checkInvalidState,
+} from '@utils/forms';
 import type { Attributes } from '@utils/helpers';
 import { inheritAriaAttributes, debounceEvent, inheritAttributes, componentOnReady } from '@utils/helpers';
 import { createSlotMutationController } from '@utils/slot-mutation-controller';
@@ -56,6 +61,7 @@ export class Input implements ComponentInterface {
   private notchSpacerEl: HTMLElement | undefined;
   private startContainerController?: StartContainerController;
   private startContainerEl: HTMLElement | undefined;
+  private clickController?: ClickController;
 
   private originalIonInput?: EventEmitter<InputInputEventDetail>;
 
@@ -392,11 +398,7 @@ export class Input implements ComponentInterface {
    */
   @Listen('click', { capture: true })
   onClickCapture(ev: Event) {
-    const nativeInput = this.nativeInput;
-    if (nativeInput && ev.target === nativeInput) {
-      ev.stopPropagation();
-      this.el.click();
-    }
+    this.clickController?.handleClickCapture(ev);
   }
 
   componentWillLoad() {
@@ -433,6 +435,8 @@ export class Input implements ComponentInterface {
 
     this.startContainerController.calculateStartContainerWidth();
 
+    this.clickController = createClickController(el, () => this.nativeInput);
+
     // Watch for class changes to update validation state
     if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
       this.validationObserver = new MutationObserver(() => {
diff --git a/core/src/components/input/test/basic/input.e2e.ts b/core/src/components/input/test/basic/input.e2e.ts
index 65a921a0f6f..7ab510d191a 100644
--- a/core/src/components/input/test/basic/input.e2e.ts
+++ b/core/src/components/input/test/basic/input.e2e.ts
@@ -347,3 +347,90 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
     });
   });
 });
+
+/**
+ * This behavior does not vary across directions/modes
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('input: slotted click'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-input label="Email">
+          <ion-icon slot="start" name="lock-closed" aria-hidden="true"></ion-icon>
+          <ion-button slot="end" aria-label="Show password">
+            <ion-icon slot="icon-only" name="eye" aria-hidden="true"></ion-icon>
+          </ion-button>
+          <ion-checkbox slot="end" aria-label="Remember"></ion-checkbox>
+          <ion-radio slot="end" aria-label="Preferred"></ion-radio>
+          <ion-toggle slot="end" aria-label="Notify"></ion-toggle>
+        </ion-input>
+      `,
+        config
+      );
+    });
+
+    test('should emit one click and focus the input when a slotted icon is clicked', async ({ page }) => {
+      const clickEvent = await page.spyOnEvent('click');
+
+      await page.locator('ion-icon[slot="start"]').click();
+
+      expect(clickEvent).toHaveReceivedEventTimes(1);
+
+      const event = clickEvent.events[0];
+      expect((event.target as HTMLElement).tagName.toLowerCase()).toBe('ion-icon');
+
+      await expect(page.locator('ion-input input.native-input')).toBeFocused();
+    });
+
+    test('should emit one click without focusing the input when a slotted button is clicked', async ({ page }) => {
+      const clickEvent = await page.spyOnEvent('click');
+
+      await page.locator('ion-button[slot="end"]').click();
+
+      expect(clickEvent).toHaveReceivedEventTimes(1);
+
+      await expect(page.locator('ion-input input.native-input')).not.toBeFocused();
+    });
+
+    /**
+     * Browsers skip the label forwarding when a click lands on interactive
+     * content, so activating a slotted control leaves the input alone. A radio
+     * outside a radio group cannot be checked, so only the input is asserted
+     * for it.
+     */
+    [
+      { tag: 'ion-checkbox', checkable: true },
+      { tag: 'ion-radio', checkable: false },
+      { tag: 'ion-toggle', checkable: true },
+    ].forEach(({ tag, checkable }) => {
+      test(`should not focus the input when a slotted ${tag} is clicked`, async ({ page }) => {
+        const control = page.locator(tag);
+
+        await control.click();
+        await page.waitForChanges();
+
+        if (checkable) {
+          await expect(control).toHaveJSProperty('checked', true);
+        }
+
+        await expect(page.locator('ion-input input.native-input')).not.toBeFocused();
+      });
+    });
+
+    test('should emit one click when the input is clicked after slotted content', async ({ page }) => {
+      /**
+       * Clicking a slotted button does not produce a forwarded click for the
+       * input to ignore, so the following click on the input itself must
+       * still be emitted.
+       */
+      await page.locator('ion-button[slot="end"]').click();
+
+      const clickEvent = await page.spyOnEvent('click');
+
+      await page.locator('ion-input input.native-input').click();
+
+      expect(clickEvent).toHaveReceivedEventTimes(1);
+    });
+  });
+});
diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx
index 7c3f7f7477f..a8fd05996af 100644
--- a/core/src/components/select/select.tsx
+++ b/core/src/components/select/select.tsx
@@ -1,11 +1,26 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Build, Component, Element, Event, Host, Method, Prop, State, Watch, h, forceUpdate } from '@stencil/core';
+import {
+  Build,
+  Component,
+  Element,
+  Event,
+  Host,
+  Listen,
+  Method,
+  Prop,
+  State,
+  Watch,
+  h,
+  forceUpdate,
+} from '@stencil/core';
 import { ENABLE_HTML_CONTENT_DEFAULT } from '@utils/config';
-import type { NotchController, StartContainerController } from '@utils/forms';
+import type { ClickController, NotchController, StartContainerController } from '@utils/forms';
 import {
   compareOptions,
+  createClickController,
   createNotchController,
   createStartContainerController,
+  getSlottedClickContent,
   isOptionSelected,
   checkInvalidState,
 } from '@utils/forms';
@@ -91,6 +106,8 @@ export class Select implements ComponentInterface {
   private startContainerEl: HTMLElement | undefined;
   private customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
 
+  private clickController?: ClickController;
+
   @Element() el!: HTMLIonSelectElement;
 
   @State() isExpanded = false;
@@ -364,6 +381,8 @@ export class Select implements ComponentInterface {
 
     this.startContainerController.calculateStartContainerWidth();
 
+    this.clickController = createClickController(el);
+
     this.updateOverlayOptions();
     this.emitStyle();
 
@@ -993,42 +1012,39 @@ export class Select implements ComponentInterface {
     this.ionStyle.emit(style);
   }
 
+  /**
+   * The label wrapping the slots has no `for` attribute, so the browser
+   * forwards a click on slotted content to the label's first labelable
+   * descendant, the internal button. That forwarded click bubbles back out of
+   * the shadow root targeting the host, where it would be emitted a second
+   * time and open the select. The controller swallows it during the capture
+   * phase, leaving the click on the slotted content itself alone so slotted
+   * links, checkboxes and buttons keep their default behavior.
+   */
+  @Listen('click', { capture: true })
+  onClickCapture(ev: Event) {
+    this.clickController?.handleClickCapture(ev);
+  }
+
   private onClick = (ev: UIEvent) => {
-    const target = ev.target as HTMLElement;
-    const closestSlot = target.closest('[slot="start"], [slot="end"]');
+    const slotted = getSlottedClickContent(ev, this.el);
 
-    if (target === this.el || closestSlot === null) {
-      this.setFocus();
-      this.open(ev);
-    } else {
-      /**
-       * Prevent clicks to the start/end slots from opening the select.
-       * We ensure the target isn't this element in case the select is slotted
-       * in, for example, an item. This would prevent the select from ever
-       * being opened since the element itself has slot="start"/"end".
-       *
-       * Clicking a slotted element also causes a click
-       * on the <label> element (since it wraps the slots).
-       * Clicking <label> dispatches another click event on
-       * the native form control that then bubbles up to this
-       * listener. This additional event targets the host
-       * element, so the select overlay is opened.
-       *
-       * When the slotted elements are clicked (and therefore
-       * the ancestor <label> element) we want to prevent the label
-       * from dispatching another click event.
-       *
-       * Do not call stopPropagation() because this will cause
-       * click handlers on the slotted elements to never fire in React.
-       * When developers do onClick in React a native "click" listener
-       * is added on the root element, not the slotted element. When that
-       * native click listener fires, React then dispatches the synthetic
-       * click event on the slotted element. However, if stopPropagation
-       * is called then the native click event will never bubble up
-       * to the root element.
-       */
-      ev.preventDefault();
+    /**
+     * Interactive slotted content, such as a button or a checkbox, handles its
+     * own click, so it should not open the select as well. Any other slotted
+     * content is decorative and behaves the same as clicking the select
+     * itself.
+     */
+    if (slotted !== null) {
+      const interactive = (ev.target as HTMLElement).closest(INTERACTIVE_SLOTTED_CONTENT);
+
+      if (interactive !== null && slotted.contains(interactive)) {
+        return;
+      }
     }
+
+    this.setFocus();
+    this.open(ev);
   };
 
   private onFocus = () => {
@@ -1692,3 +1708,31 @@ const extractOptionContent = (option: HTMLIonSelectOptionElement, customHTMLEnab
 let selectIds = 0;
 
 const OPTION_CLASS = 'select-interface-option';
+
+/**
+ * Slotted content that handles its own click, so clicking it should not also
+ * open the select.
+ *
+ * This deliberately does not reuse `focusableQueryString`. That selector
+ * answers whether an element can take focus right now, which is a different
+ * question: an ion-radio outside a radio group carries tabindex="-1" from the
+ * group's roving tabindex, and disabled controls are excluded, yet both still
+ * handle their own clicks.
+ */
+const INTERACTIVE_SLOTTED_CONTENT = [
+  'a[href]',
+  'button',
+  'input[type="checkbox"]',
+  'input[type="radio"]',
+  'ion-button',
+  'ion-checkbox',
+  'ion-radio',
+  'ion-toggle',
+  '[tabindex]:not([tabindex^="-"])',
+  /**
+   * Covers the remaining Ionic controls. The tags above are still listed
+   * because ion-checkbox and ion-radio only carry this class when they are
+   * outside an item, so a select inside an item would lose the match.
+   */
+  '.ion-focusable',
+].join(', ');
diff --git a/core/src/components/select/test/basic/select.e2e.ts b/core/src/components/select/test/basic/select.e2e.ts
index 2e2582abe3c..f78909d5171 100644
--- a/core/src/components/select/test/basic/select.e2e.ts
+++ b/core/src/components/select/test/basic/select.e2e.ts
@@ -1339,3 +1339,207 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
     });
   });
 });
+
+/**
+ * This behavior does not vary across directions/modes
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('select: slotted click'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-select label="Fruit" interface="alert">
+          <ion-icon slot="start" name="pizza" aria-hidden="true"></ion-icon>
+          <ion-button slot="end" aria-label="Clear selection">
+            <ion-icon slot="icon-only" name="trash" aria-hidden="true"></ion-icon>
+          </ion-button>
+          <input slot="end" type="checkbox" aria-label="Favorite" />
+          <ion-checkbox slot="end" aria-label="Favorite"></ion-checkbox>
+          <ion-radio slot="end" aria-label="Preferred"></ion-radio>
+          <ion-toggle slot="end" aria-label="Notify"></ion-toggle>
+          <a slot="end" href="#navigated">Details</a>
+          <div slot="end">
+            <button type="button">Nested</button>
+            <span>Nested</span>
+          </div>
+          <ion-select-option value="apple">Apple</ion-select-option>
+        </ion-select>
+      `,
+        config
+      );
+    });
+
+    /**
+     * Decorative slotted content behaves the same as clicking the select
+     * itself, so it opens the overlay.
+     */
+    test('should emit one click and open the select when a slotted icon is clicked', async ({ page }) => {
+      const clickEvent = await page.spyOnEvent('click');
+      const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+
+      await page.locator('ion-icon[slot="start"]').click();
+
+      expect(clickEvent).toHaveReceivedEventTimes(1);
+
+      const event = clickEvent.events[0];
+      expect((event.target as HTMLElement).tagName.toLowerCase()).toBe('ion-icon');
+
+      await ionAlertDidPresent.next();
+
+      await expect(page.locator('ion-alert')).toBeVisible();
+    });
+
+    test('should emit one click without opening the select when a slotted button is clicked', async ({ page }) => {
+      const clickEvent = await page.spyOnEvent('click');
+
+      await page.locator('ion-button[slot="end"]').click();
+
+      expect(clickEvent).toHaveReceivedEventTimes(1);
+
+      /**
+       * Opening is asynchronous, so an assertion that the select stayed closed
+       * passes on its first poll while the select is still on its way open.
+       * Pending renders are flushed first so the expanded class is applied by
+       * the time it is checked.
+       *
+       * Focus is not asserted here. WebKit forwards focus from the wrapping
+       * label to the select's own control even when the click lands on
+       * interactive slotted content, so the select reports focus there while
+       * Chromium and Firefox leave it on the slotted button.
+       */
+      await page.waitForChanges();
+
+      await expect(page.locator('ion-select')).not.toHaveClass(/select-expanded/);
+    });
+
+    test('should activate slotted form controls without opening the select', async ({ page }) => {
+      const checkbox = page.locator('input[slot="end"][type="checkbox"]');
+
+      await checkbox.click();
+      await page.waitForChanges();
+
+      await expect(checkbox).toBeChecked();
+      await expect(page.locator('ion-select')).not.toHaveClass(/select-expanded/);
+    });
+
+    /**
+     * A radio outside a radio group keeps the tabindex of -1 that the group
+     * would otherwise raise, so it is the control that regressed while the
+     * interactive check relied on a focusability selector.
+     */
+    [
+      { tag: 'ion-checkbox', checkable: true },
+      { tag: 'ion-radio', checkable: false },
+      { tag: 'ion-toggle', checkable: true },
+    ].forEach(({ tag, checkable }) => {
+      test(`should not open the select when a slotted ${tag} is clicked`, async ({ page }) => {
+        const control = page.locator(tag);
+
+        await control.click();
+        await page.waitForChanges();
+
+        if (checkable) {
+          await expect(control).toHaveJSProperty('checked', true);
+        }
+
+        await expect(page.locator('ion-select')).not.toHaveClass(/select-expanded/);
+      });
+    });
+
+    test('should follow a slotted link without opening the select', async ({ page }) => {
+      await page.locator('a[slot="end"]').click();
+      await page.waitForChanges();
+
+      expect(new URL(page.url()).hash).toBe('#navigated');
+      await expect(page.locator('ion-select')).not.toHaveClass(/select-expanded/);
+    });
+
+    /**
+     * Whether the select opens follows the content that was clicked, not the
+     * slotted wrapper around it, so the same wrapper produces both results.
+     */
+    test('should not open the select when interactive content inside a slotted wrapper is clicked', async ({
+      page,
+    }) => {
+      await page.locator('div[slot="end"] button').click();
+      await page.waitForChanges();
+
+      await expect(page.locator('ion-select')).not.toHaveClass(/select-expanded/);
+    });
+
+    test('should open the select when decorative content inside a slotted wrapper is clicked', async ({ page }) => {
+      const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+
+      await page.locator('div[slot="end"] span').click();
+      await ionAlertDidPresent.next();
+
+      await expect(page.locator('ion-alert')).toBeVisible();
+    });
+
+    test('should open when the select is clicked after slotted content', async ({ page }) => {
+      /**
+       * Clicking a slotted button does not produce a forwarded click for the
+       * select to ignore, so the following click on the select itself must
+       * still open it.
+       */
+      await page.locator('ion-button[slot="end"]').click();
+
+      const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+
+      await page.locator('ion-select').click({ position: { x: 5, y: 5 } });
+      await ionAlertDidPresent.next();
+
+      await expect(page.locator('ion-alert')).toBeVisible();
+    });
+  });
+
+  /**
+   * A select slotted into an item carries slot="end" on its own host, so the
+   * host is excluded when looking for the slotted content a click started on.
+   * Without that the select would read every click on itself as a slotted
+   * click and would never open.
+   */
+  test.describe(title('select: slotted click in item'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-item>
+          <ion-select slot="end" label="Fruit" interface="alert">
+            <ion-icon slot="start" name="pizza" aria-hidden="true"></ion-icon>
+            <ion-button slot="end" aria-label="Clear selection">
+              <ion-icon slot="icon-only" name="trash" aria-hidden="true"></ion-icon>
+            </ion-button>
+            <ion-select-option value="apple">Apple</ion-select-option>
+          </ion-select>
+        </ion-item>
+      `,
+        config
+      );
+    });
+
+    test('should open when the select itself is clicked', async ({ page }) => {
+      const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+
+      await page.locator('ion-select').click({ position: { x: 5, y: 5 } });
+      await ionAlertDidPresent.next();
+
+      await expect(page.locator('ion-alert')).toBeVisible();
+    });
+
+    test('should open when a slotted icon is clicked', async ({ page }) => {
+      const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+
+      await page.locator('ion-icon[slot="start"]').click();
+      await ionAlertDidPresent.next();
+
+      await expect(page.locator('ion-alert')).toBeVisible();
+    });
+
+    test('should not open when a slotted button is clicked', async ({ page }) => {
+      await page.locator('ion-button[slot="end"]').click();
+      await page.waitForChanges();
+
+      await expect(page.locator('ion-select')).not.toHaveClass(/select-expanded/);
+    });
+  });
+});
diff --git a/core/src/components/textarea/test/basic/textarea.e2e.ts b/core/src/components/textarea/test/basic/textarea.e2e.ts
index 75db2a90550..1d59ec918a4 100644
--- a/core/src/components/textarea/test/basic/textarea.e2e.ts
+++ b/core/src/components/textarea/test/basic/textarea.e2e.ts
@@ -249,3 +249,90 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
     });
   });
 });
+
+/**
+ * This behavior does not vary across directions/modes
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('textarea: slotted click'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-textarea label="Notes">
+          <ion-icon slot="start" name="lock-closed" aria-hidden="true"></ion-icon>
+          <ion-button slot="end" aria-label="Clear notes">
+            <ion-icon slot="icon-only" name="trash" aria-hidden="true"></ion-icon>
+          </ion-button>
+          <ion-checkbox slot="end" aria-label="Remember"></ion-checkbox>
+          <ion-radio slot="end" aria-label="Preferred"></ion-radio>
+          <ion-toggle slot="end" aria-label="Notify"></ion-toggle>
+        </ion-textarea>
+      `,
+        config
+      );
+    });
+
+    test('should emit one click and focus the textarea when a slotted icon is clicked', async ({ page }) => {
+      const clickEvent = await page.spyOnEvent('click');
+
+      await page.locator('ion-icon[slot="start"]').click();
+
+      expect(clickEvent).toHaveReceivedEventTimes(1);
+
+      const event = clickEvent.events[0];
+      expect((event.target as HTMLElement).tagName.toLowerCase()).toBe('ion-icon');
+
+      await expect(page.locator('ion-textarea textarea')).toBeFocused();
+    });
+
+    test('should emit one click without focusing the textarea when a slotted button is clicked', async ({ page }) => {
+      const clickEvent = await page.spyOnEvent('click');
+
+      await page.locator('ion-button[slot="end"]').click();
+
+      expect(clickEvent).toHaveReceivedEventTimes(1);
+
+      await expect(page.locator('ion-textarea textarea')).not.toBeFocused();
+    });
+
+    /**
+     * Browsers skip the label forwarding when a click lands on interactive
+     * content, so activating a slotted control leaves the textarea alone. A
+     * radio outside a radio group cannot be checked, so only the textarea is
+     * asserted for it.
+     */
+    [
+      { tag: 'ion-checkbox', checkable: true },
+      { tag: 'ion-radio', checkable: false },
+      { tag: 'ion-toggle', checkable: true },
+    ].forEach(({ tag, checkable }) => {
+      test(`should not focus the textarea when a slotted ${tag} is clicked`, async ({ page }) => {
+        const control = page.locator(tag);
+
+        await control.click();
+        await page.waitForChanges();
+
+        if (checkable) {
+          await expect(control).toHaveJSProperty('checked', true);
+        }
+
+        await expect(page.locator('ion-textarea textarea')).not.toBeFocused();
+      });
+    });
+
+    test('should emit one click when the textarea is clicked after slotted content', async ({ page }) => {
+      /**
+       * Clicking a slotted button does not produce a forwarded click for the
+       * textarea to ignore, so the following click on the textarea itself
+       * must still be emitted.
+       */
+      await page.locator('ion-button[slot="end"]').click();
+
+      const clickEvent = await page.spyOnEvent('click');
+
+      await page.locator('ion-textarea textarea').click();
+
+      expect(clickEvent).toHaveReceivedEventTimes(1);
+    });
+  });
+});
diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx
index 5fd398bb9d3..c893a652144 100644
--- a/core/src/components/textarea/textarea.tsx
+++ b/core/src/components/textarea/textarea.tsx
@@ -14,8 +14,13 @@ import {
   h,
   writeTask,
 } from '@stencil/core';
-import type { NotchController, StartContainerController } from '@utils/forms';
-import { createNotchController, createStartContainerController, checkInvalidState } from '@utils/forms';
+import type { ClickController, NotchController, StartContainerController } from '@utils/forms';
+import {
+  createClickController,
+  createNotchController,
+  createStartContainerController,
+  checkInvalidState,
+} from '@utils/forms';
 import type { Attributes } from '@utils/helpers';
 import { inheritAriaAttributes, debounceEvent, inheritAttributes, componentOnReady } from '@utils/helpers';
 import { createSlotMutationController } from '@utils/slot-mutation-controller';
@@ -65,6 +70,7 @@ export class Textarea implements ComponentInterface {
   private notchSpacerEl: HTMLElement | undefined;
   private startContainerController?: StartContainerController;
   private startContainerEl: HTMLElement | undefined;
+  private clickController?: ClickController;
 
   /**
    * The value of the textarea when the textarea is focused.
@@ -330,11 +336,7 @@ export class Textarea implements ComponentInterface {
    */
   @Listen('click', { capture: true })
   onClickCapture(ev: Event) {
-    const nativeInput = this.nativeInput;
-    if (nativeInput && ev.target === nativeInput) {
-      ev.stopPropagation();
-      this.el.click();
-    }
+    this.clickController?.handleClickCapture(ev);
   }
 
   connectedCallback() {
@@ -362,6 +364,8 @@ export class Textarea implements ComponentInterface {
 
     this.startContainerController.calculateStartContainerWidth();
 
+    this.clickController = createClickController(el, () => this.nativeInput);
+
     // Watch for class changes to update validation state
     if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
       this.validationObserver = new MutationObserver(() => {
diff --git a/core/src/utils/forms/click-controller.ts b/core/src/utils/forms/click-controller.ts
new file mode 100644
index 00000000000..23673d1b852
--- /dev/null
+++ b/core/src/utils/forms/click-controller.ts
@@ -0,0 +1,84 @@
+import { raf } from '@utils/helpers';
+
+export interface ClickController {
+  handleClickCapture: (ev: Event) => void;
+}
+
+/**
+ * The content slotted into a form control's start or end slot that a click
+ * started on, or `null` when the click did not start on slotted content.
+ *
+ * The slotted element is compared against the host in case the form control
+ * itself is slotted into, for example, an item. Without that check a control
+ * carrying slot="start"/"end" would treat every click on itself as a slotted
+ * click.
+ */
+export const getSlottedClickContent = (ev: Event, el: HTMLElement): HTMLElement | null => {
+  const slotted = (ev.target as HTMLElement).closest<HTMLElement>('[slot="start"], [slot="end"]');
+
+  return slotted !== null && slotted !== el && el.contains(slotted) ? slotted : null;
+};
+
+/**
+ * Whether a click started on content slotted into a form control's start or
+ * end slot.
+ */
+const isSlottedClick = (ev: Event, el: HTMLElement): boolean => getSlottedClickContent(ev, el) !== null;
+
+/**
+ * A utility for form components that wrap their content in a <label>, such as
+ * ion-input, ion-textarea and ion-select.
+ *
+ * Clicking slotted content also clicks that label, and the browser follows it
+ * with a click on the label's control. That second click would be emitted from
+ * the host as a duplicate, so the slotted click is remembered and the click
+ * that follows it is suppressed.
+ *
+ * Browsers skip the forwarding when the click lands on interactive content,
+ * such as a slotted button, so the slotted click is remembered for a frame
+ * rather than until a forwarded click that may never arrive.
+ *
+ * @internal
+ * @param el - The host element.
+ * @param getNativeInput - A callback returning the native form control the
+ * label points at, for components that have one. Those components emit the
+ * click from the host rather than the control, so the control's click is
+ * always stopped and re-dispatched from the host. Omit it for components whose
+ * label has no `for` attribute, such as ion-select, where the browser forwards
+ * to an internal control that already re-bubbles targeting the host.
+ */
+export const createClickController = (
+  el: HTMLElement,
+  getNativeInput?: () => HTMLInputElement | HTMLTextAreaElement | undefined
+): ClickController => {
+  let hasSlottedClick = false;
+
+  const handleClickCapture = (ev: Event) => {
+    if (isSlottedClick(ev, el)) {
+      hasSlottedClick = true;
+      raf(() => (hasSlottedClick = false));
+      return;
+    }
+
+    if (getNativeInput === undefined) {
+      if (hasSlottedClick) {
+        ev.stopPropagation();
+        hasSlottedClick = false;
+      }
+      return;
+    }
+
+    const nativeInput = getNativeInput();
+    if (nativeInput !== undefined && ev.target === nativeInput) {
+      ev.stopPropagation();
+
+      if (!hasSlottedClick) {
+        el.click();
+      }
+
+      hasSlottedClick = false;
+    }
+  };
+
+  return { handleClickCapture };
+};
diff --git a/core/src/utils/forms/index.ts b/core/src/utils/forms/index.ts
index 1d31ca31bc5..31732efac24 100644
--- a/core/src/utils/forms/index.ts
+++ b/core/src/utils/forms/index.ts
@@ -2,4 +2,5 @@ export * from './notch-controller';
 export * from './start-container-controller';
 export * from './compare-with-utils';
 export * from './item-multiple-inputs';
+export * from './click-controller';
 export * from './validity';
diff --git a/core/src/utils/forms/test/click-controller.spec.ts b/core/src/utils/forms/test/click-controller.spec.ts
new file mode 100644
index 00000000000..48942730f6a
--- /dev/null
+++ b/core/src/utils/forms/test/click-controller.spec.ts
@@ -0,0 +1,196 @@
+import type { ClickController } from '../click-controller';
+import { createClickController, getSlottedClickContent } from '../click-controller';
+
+/**
+ * The controller clears its slotted click on an animation frame, so the
+ * tests drive the frames by hand.
+ */
+let frames: Array<() => void>;
+
+const flushFrames = () => {
+  const batch = frames;
+  frames = [];
+  batch.forEach((callback) => callback());
+};
+
+/**
+ * `raf` reads `requestAnimationFrame` off the global at call time, and
+ * Stencil's mock window exposes it as a getter, so it has to be replaced on
+ * `globalThis` rather than assigned or spied on.
+ */
+let originalRaf: PropertyDescriptor | undefined;
+
+describe('Click Controller', () => {
+  let host: HTMLElement;
+  let slotted: HTMLElement;
+  let nativeInput: HTMLInputElement;
+  let controller: ClickController;
+
+  // The target of every click that was allowed to reach the document.
+  let propagated: string[];
+
+  const click = (target: Element) => target.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+
+  const attach = (getNativeInput?: () => HTMLInputElement | undefined) => {
+    controller = createClickController(host, getNativeInput);
+    host.addEventListener('click', (ev) => controller.handleClickCapture(ev), { capture: true });
+  };
+
+  beforeEach(() => {
+    frames = [];
+    propagated = [];
+
+    originalRaf = Object.getOwnPropertyDescriptor(globalThis, 'requestAnimationFrame');
+    Object.defineProperty(globalThis, 'requestAnimationFrame', {
+      value: (callback: FrameRequestCallback) => frames.push(() => callback(0)),
+      configurable: true,
+      writable: true,
+    });
+
+    host = document.createElement('div');
+    host.id = 'host';
+
+    slotted = document.createElement('div');
+    slotted.id = 'slotted';
+    slotted.setAttribute('slot', 'start');
+
+    nativeInput = document.createElement('input');
+    nativeInput.id = 'native';
+
+    host.append(slotted, nativeInput);
+    document.body.appendChild(host);
+
+    document.addEventListener('click', (ev) => propagated.push((ev.target as Element).id));
+  });
+
+  afterEach(() => {
+    host.remove();
+    document.body.innerHTML = '';
+
+    if (originalRaf) {
+      Object.defineProperty(globalThis, 'requestAnimationFrame', originalRaf);
+    } else {
+      delete (globalThis as any).requestAnimationFrame;
+    }
+  });
+
+  describe('getSlottedClickContent', () => {
+    const eventFor = (target: Element) => ({ target } as unknown as Event);
+
+    it('should return the slotted element the click started on', () => {
+      expect(getSlottedClickContent(eventFor(slotted), host)).toBe(slotted);
+    });
+
+    it('should return the slotted ancestor when a descendant is clicked', () => {
+      const nested = document.createElement('span');
+      slotted.appendChild(nested);
+
+      expect(getSlottedClickContent(eventFor(nested), host)).toBe(slotted);
+    });
+
+    it('should return null when the click did not start on slotted content', () => {
+      expect(getSlottedClickContent(eventFor(nativeInput), host)).toBe(null);
+    });
+
+    it('should return null when the host itself carries the slot', () => {
+      host.setAttribute('slot', 'end');
+
+      expect(getSlottedClickContent(eventFor(host), host)).toBe(null);
+    });
+
+    it('should return null for slotted content outside the host', () => {
+      const outside = document.createElement('div');
+      outside.setAttribute('slot', 'start');
+      document.body.appendChild(outside);
+
+      expect(getSlottedClickContent(eventFor(outside), host)).toBe(null);
+    });
+  });
+
+  /**
+   * ion-input and ion-textarea wrap their content in a label pointing at a
+   * native control, so the control's click is emitted from the host instead.
+   */
+  describe('with a native control', () => {
+    beforeEach(() => attach(() => nativeInput));
+
+    it('should emit a click on the native control from the host', () => {
+      click(nativeInput);
+
+      expect(propagated).toEqual(['host']);
+    });
+
+    it('should let a click on slotted content through untouched', () => {
+      click(slotted);
+
+      expect(propagated).toEqual(['slotted']);
+    });
+
+    it('should not emit the click the label forwards after slotted content', () => {
+      click(slotted);
+      click(nativeInput);
+
+      expect(propagated).toEqual(['slotted']);
+    });
+
+    it('should emit again once the frame after a slotted click has passed', () => {
+      click(slotted);
+      flushFrames();
+
+      click(nativeInput);
+
+      expect(propagated).toEqual(['slotted', 'host']);
+    });
+
+    it('should leave a click on the host alone', () => {
+      click(host);
+
+      expect(propagated).toEqual(['host']);
+    });
+  });
+
+  /**
+   * ion-select has no labelable control of its own, so the browser
+   * forwards to an internal control that re-bubbles targeting the host.
+   * That forwarded click is swallowed rather than re-emitted.
+   */
+  describe('without a native control', () => {
+    beforeEach(() => attach());
+
+    it('should let a click on slotted content through untouched', () => {
+      click(slotted);
+
+      expect(propagated).toEqual(['slotted']);
+    });
+
+    it('should swallow the click that follows slotted content', () => {
+      click(slotted);
+      click(host);
+
+      expect(propagated).toEqual(['slotted']);
+    });
+
+    it('should swallow only the first click that follows slotted content', () => {
+      click(slotted);
+      click(host);
+      click(host);
+
+      expect(propagated).toEqual(['slotted', 'host']);
+    });
+
+    it('should let a click through once the frame after a slotted click has passed', () => {
+      click(slotted);
+      flushFrames();
+
+      click(host);
+
+      expect(propagated).toEqual(['slotted', 'host']);
+    });
+
+    it('should leave a click through when no slotted click came first', () => {
+      click(host);
+
+      expect(propagated).toEqual(['host']);
+    });
+  });
+});