diff --git a/core/src/components/checkbox/checkbox.scss b/core/src/components/checkbox/checkbox.scss
index 438add273d0..b99260dd8ed 100644
--- a/core/src/components/checkbox/checkbox.scss
+++ b/core/src/components/checkbox/checkbox.scss
@@ -1,4 +1,3 @@
-@import "../../themes/ionic.globals";
 @import "./checkbox.vars.scss";
 
 // Checkbox
@@ -119,9 +118,16 @@ input {
   display: none;
 }
 
+// Hide the native focus ring since we draw our own focus indicator.
+:host(:focus) {
+  outline: none;
+}
+
 .native-wrapper {
   display: flex;
 
+  position: relative;
+
   align-items: center;
 }
 
@@ -152,6 +158,28 @@ input {
   opacity: 0;
 }
 
+// Checkbox: Keyboard Focus
+// ---------------------------------------------
+
+:host(.ion-focused) .native-wrapper::after {
+  @include border-radius(50%);
+
+  display: block;
+  position: absolute;
+
+  width: $checkbox-focus-ring-size;
+  height: $checkbox-focus-ring-size;
+
+  background: $checkbox-background-color-focused;
+
+  content: "";
+  opacity: 0.2;
+
+  // Centered with insets because `transform` is physical and breaks in RTL.
+  inset-block-start: calc(50% - #{$checkbox-focus-ring-size} / 2);
+  inset-inline-start: calc(50% - #{$checkbox-focus-ring-size} / 2);
+}
+
 // Checkbox Bottom Content
 // ----------------------------------------------------------------
 
diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx
index 99cb13c474a..a13bb3580be 100644
--- a/core/src/components/checkbox/checkbox.tsx
+++ b/core/src/components/checkbox/checkbox.tsx
@@ -1,6 +1,6 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Build, Component, Element, Event, Host, Method, Prop, State, h } from '@stencil/core';
-import { checkInvalidState } from '@utils/forms';
+import { Build, Component, Element, Event, Host, Method, Prop, State, forceUpdate, h } from '@stencil/core';
+import { checkInvalidState, createItemMultipleInputsObserver } from '@utils/forms';
 import type { Attributes } from '@utils/helpers';
 import { inheritAriaAttributes, renderHiddenInput } from '@utils/helpers';
 import { createColorClasses, hostContext } from '@utils/theme';
@@ -37,6 +37,7 @@ export class Checkbox implements ComponentInterface {
   private errorTextId = `${this.inputId}-error-text`;
   private inheritedAttributes: Attributes = {};
   private validationObserver?: MutationObserver;
+  private itemFocusObserver?: MutationObserver;
 
   @Element() el!: HTMLIonCheckboxElement;
 
@@ -199,6 +200,8 @@ export class Checkbox implements ComponentInterface {
     // Always set initial state
     this.isInvalid = checkInvalidState(el);
     this.hasLabelContent = this.el.textContent !== '';
+
+    this.itemFocusObserver = createItemMultipleInputsObserver(el, () => forceUpdate(this));
   }
 
   componentWillLoad() {
@@ -210,11 +213,14 @@ export class Checkbox implements ComponentInterface {
   }
 
   disconnectedCallback() {
-    // Clean up validation observer to prevent memory leaks.
     if (this.validationObserver) {
       this.validationObserver.disconnect();
       this.validationObserver = undefined;
     }
+    if (this.itemFocusObserver) {
+      this.itemFocusObserver.disconnect();
+      this.itemFocusObserver = undefined;
+    }
   }
 
   /** @internal */
@@ -338,6 +344,8 @@ export class Checkbox implements ComponentInterface {
     } = this;
     const mode = getIonMode(this);
     const path = getSVGPath(mode, indeterminate);
+    const inItem = hostContext('ion-item', el);
+    const inMultipleInputsItem = hostContext('ion-item.item-multiple-inputs', el);
 
     renderHiddenInput(true, el, name, checked ? value : '', disabled);
 
@@ -360,11 +368,14 @@ export class Checkbox implements ComponentInterface {
         onClick={this.onClick}
         class={createColorClasses(color, {
           [mode]: true,
-          'in-item': hostContext('ion-item', el),
+          'in-item': inItem,
           'checkbox-checked': checked,
           'checkbox-disabled': disabled,
           'checkbox-indeterminate': indeterminate,
           interactive: true,
+          // A single-input item has the input cover and draws the indicator itself.
+          // A multi-input item has no cover, so each control draws its own.
+          'ion-focusable': !inItem || inMultipleInputsItem,
           [`checkbox-justify-${justify}`]: justify !== undefined,
           [`checkbox-alignment-${alignment}`]: alignment !== undefined,
           [`checkbox-label-placement-${labelPlacement}`]: true,
diff --git a/core/src/components/checkbox/checkbox.vars.scss b/core/src/components/checkbox/checkbox.vars.scss
index 8c73dff6f8f..551eb479b38 100644
--- a/core/src/components/checkbox/checkbox.vars.scss
+++ b/core/src/components/checkbox/checkbox.vars.scss
@@ -1,5 +1,12 @@
+@import "../../themes/ionic.globals";
+
 /// @prop - Top margin of checkbox's label when in an item
 $checkbox-item-label-margin-top: 10px;
 
 /// @prop - Bottom margin of checkbox's label when in an item
-$checkbox-item-label-margin-bottom: 10px;
\ No newline at end of file
+$checkbox-item-label-margin-bottom: 10px;
+
+/// @prop - Background color of focus indicator for checkbox when focused
+$checkbox-background-color-focused: ion-color(primary, tint);
+
+$checkbox-focus-ring-size: 36px;
diff --git a/core/src/components/checkbox/test/a11y/checkbox.e2e.ts b/core/src/components/checkbox/test/a11y/checkbox.e2e.ts
index 6d0b6645ae5..989a7f97a96 100644
--- a/core/src/components/checkbox/test/a11y/checkbox.e2e.ts
+++ b/core/src/components/checkbox/test/a11y/checkbox.e2e.ts
@@ -25,6 +25,64 @@ configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title,
   });
 });
 
+/**
+ * These assert `ion-focusable`, not the rendered ring, because `ion-focused`
+ * relies on keyboard-mode detection that is flaky on WebKit. Gating is mode-independent.
+ */
+configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, config }) => {
+  test.describe(title('checkbox: focus indicator'), () => {
+    test('standalone checkbox should be focusable', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-checkbox aria-label="Checkbox">Checkbox</ion-checkbox>
+        </ion-app>
+      `,
+        config
+      );
+
+      const checkbox = page.locator('ion-checkbox');
+      await expect(checkbox).toHaveClass(/ion-focusable/);
+    });
+
+    test('checkbox in a single-input item should not show its own focus indicator', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-item>
+            <ion-checkbox>Checkbox</ion-checkbox>
+          </ion-item>
+        </ion-app>
+      `,
+        config
+      );
+
+      const checkbox = page.locator('ion-checkbox');
+      const item = page.locator('ion-item');
+      await expect(checkbox).not.toHaveClass(/ion-focusable/);
+      await expect(item).toHaveClass(/ion-focusable/);
+    });
+
+    test('checkbox in a multi-input item should be focusable', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-item>
+            <ion-checkbox>Checkbox 1</ion-checkbox>
+            <ion-checkbox>Checkbox 2</ion-checkbox>
+          </ion-item>
+        </ion-app>
+      `,
+        config
+      );
+
+      const checkboxes = page.locator('ion-checkbox');
+      await expect(checkboxes.nth(0)).toHaveClass(/ion-focusable/);
+      await expect(checkboxes.nth(1)).toHaveClass(/ion-focusable/);
+    });
+  });
+});
+
 configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
   test.describe(title('checkbox: a11y'), () => {
     test.describe(title('checkbox: font scaling'), () => {
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts b/core/src/components/checkbox/test/basic/checkbox.e2e.ts
index 733f229e4b6..61c5cf58ff6 100644
--- a/core/src/components/checkbox/test/basic/checkbox.e2e.ts
+++ b/core/src/components/checkbox/test/basic/checkbox.e2e.ts
@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
+import { applyKeyboardFocus, configs, test } from '@utils/test/playwright';
 
 configs().forEach(({ title, screenshot, config }) => {
   test.describe(title('checkbox: basic visual tests'), () => {
@@ -47,7 +47,7 @@ configs().forEach(({ title, screenshot, config }) => {
 /**
  * This behavior does not vary across modes/directions
  */
-configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('checkbox: ionChange'), () => {
     test('should fire ionChange when interacting with checkbox', async ({ page }) => {
       await page.setContent(
@@ -138,48 +138,6 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
   });
 
   test.describe(title('checkbox: ionFocus'), () => {
-    test('should not have visual regressions', async ({ page, pageUtils }) => {
-      await page.setContent(
-        `
-        <style>
-          #container {
-            display: inline-block;
-            padding: 10px;
-          }
-        </style>
-
-        <div id="container">
-          <ion-checkbox>Unchecked</ion-checkbox>
-        </div>
-      `,
-        config
-      );
-
-      await pageUtils.pressKeys('Tab');
-
-      const container = page.locator('#container');
-
-      await expect(container).toHaveScreenshot(screenshot(`checkbox-focus`));
-    });
-
-    test('should not have visual regressions when interacting with checkbox in item', async ({ page, pageUtils }) => {
-      await page.setContent(
-        `
-        <ion-item class="ion-focused">
-          <ion-checkbox>Unchecked</ion-checkbox>
-        </ion-item>
-      `,
-        config
-      );
-
-      // Test focus with keyboard navigation
-      await pageUtils.pressKeys('Tab');
-
-      const item = page.locator('ion-item');
-
-      await expect(item).toHaveScreenshot(screenshot(`checkbox-in-item-focus`));
-    });
-
     test('should fire ionFocus when checkbox is focused', async ({ page, pageUtils }) => {
       await page.setContent(
         `
@@ -328,3 +286,66 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
     });
   });
 });
+
+/**
+ * This behavior does not vary across directions
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('checkbox: focus visual'), () => {
+    test('should render focus indicator when unchecked', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          #container {
+            width: fit-content;
+            padding: 10px;
+          }
+        </style>
+
+        <ion-app>
+          <div id="container">
+            <ion-checkbox>Unchecked</ion-checkbox>
+          </div>
+        </ion-app>
+      `,
+        config
+      );
+
+      const checkbox = page.locator('ion-checkbox');
+
+      await applyKeyboardFocus(page, checkbox);
+
+      const container = page.locator('#container');
+
+      await expect(container).toHaveScreenshot(screenshot(`checkbox-focus`));
+    });
+
+    test('should render focus indicator when checked', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          #container {
+            width: fit-content;
+            padding: 10px;
+          }
+        </style>
+
+        <ion-app>
+          <div id="container">
+            <ion-checkbox checked>Checked</ion-checkbox>
+          </div>
+        </ion-app>
+      `,
+        config
+      );
+
+      const checkbox = page.locator('ion-checkbox');
+
+      await applyKeyboardFocus(page, checkbox);
+
+      const container = page.locator('#container');
+
+      await expect(container).toHaveScreenshot(screenshot(`checkbox-focus-checked`));
+    });
+  });
+});
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-checked-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-checked-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..9e8caf8ee43
Binary files /dev/null and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-checked-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-checked-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-checked-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..a24d128c04b
Binary files /dev/null and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-checked-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-checked-ios-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-checked-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..5f268bb2df0
Binary files /dev/null and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-checked-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-checked-md-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-checked-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..769ebd955ad
Binary files /dev/null and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-checked-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-checked-md-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-checked-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..b794065ad98
Binary files /dev/null and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-checked-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-checked-md-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-checked-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..e96f191e15d
Binary files /dev/null and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-checked-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-ios-ltr-Mobile-Chrome-linux.png
index ae5bed12337..86c807e630c 100644
Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-ios-ltr-Mobile-Firefox-linux.png
index 305f4d89e1b..e328672a417 100644
Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-ios-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-ios-ltr-Mobile-Safari-linux.png
index 637fa09bb1e..fdfb755ea67 100644
Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-md-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..112e7ada86f
Binary files /dev/null and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-md-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..b3cc4169e01
Binary files /dev/null and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-md-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..5c86d926c0e
Binary files /dev/null and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-ios-ltr-Mobile-Chrome-linux.png
deleted file mode 100644
index 3c134cb37f8..00000000000
Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-ios-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-ios-ltr-Mobile-Safari-linux.png
deleted file mode 100644
index 9dc5aed80d8..00000000000
Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-ios-ltr-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts b/core/src/components/checkbox/test/item/checkbox.e2e.ts
index 341839739b1..d2963d81204 100644
--- a/core/src/components/checkbox/test/item/checkbox.e2e.ts
+++ b/core/src/components/checkbox/test/item/checkbox.e2e.ts
@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
+import { applyKeyboardFocus, configs, test } from '@utils/test/playwright';
 
 configs().forEach(({ title, screenshot, config }) => {
   test.describe(title('checkbox: item with list'), () => {
@@ -126,6 +126,113 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       await expect(list).toHaveScreenshot(screenshot(`checkbox-stacked-label-in-item`));
     });
   });
+
+  test.describe(title('checkbox: multiple inputs in item'), () => {
+    test('should not have visual regressions with multiple checkboxes in an item', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-list>
+            <ion-item>
+              <ion-checkbox justify="start">Checkbox 1</ion-checkbox>
+              <ion-checkbox justify="start">Checkbox 2</ion-checkbox>
+            </ion-item>
+          </ion-list>
+        `,
+        config
+      );
+      const list = page.locator('ion-list');
+      await expect(list).toHaveScreenshot(screenshot(`checkbox-multiple-in-item`));
+    });
+  });
+});
+
+/**
+ * This behavior does not vary across directions
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('checkbox: focus in item'), () => {
+    test('should render focus indicator in an item', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-item>
+            <ion-checkbox>Unchecked</ion-checkbox>
+          </ion-item>
+        </ion-app>
+      `,
+        config
+      );
+
+      const checkbox = page.locator('ion-checkbox');
+      const item = page.locator('ion-item');
+
+      await applyKeyboardFocus(page, checkbox, item);
+
+      await expect(item).toHaveScreenshot(screenshot(`checkbox-in-item-focus`));
+    });
+
+    test('should render focus indicator for a checked checkbox in an item', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-item>
+            <ion-checkbox checked>Checked</ion-checkbox>
+          </ion-item>
+        </ion-app>
+      `,
+        config
+      );
+
+      const checkbox = page.locator('ion-checkbox');
+      const item = page.locator('ion-item');
+
+      await applyKeyboardFocus(page, checkbox, item);
+
+      await expect(item).toHaveScreenshot(screenshot(`checkbox-checked-in-item-focus`));
+    });
+
+    test('should render focus indicator for a checkbox in a clickable item', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-item button>
+            <ion-checkbox>Unchecked</ion-checkbox>
+          </ion-item>
+        </ion-app>
+      `,
+        config
+      );
+
+      const checkbox = page.locator('ion-checkbox');
+      const item = page.locator('ion-item');
+
+      await applyKeyboardFocus(page, checkbox);
+
+      await expect(item).toHaveScreenshot(screenshot(`checkbox-in-clickable-item-focus`));
+    });
+
+    test('should render focus indicator for a checkbox in a multi-input item', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-item>
+            <ion-checkbox justify="start">Checkbox 1</ion-checkbox>
+            <ion-checkbox justify="start">Checkbox 2</ion-checkbox>
+          </ion-item>
+        </ion-app>
+      `,
+        config
+      );
+
+      const checkbox = page.locator('ion-checkbox').first();
+
+      await applyKeyboardFocus(page, checkbox);
+
+      const item = page.locator('ion-item');
+
+      await expect(item).toHaveScreenshot(screenshot(`checkbox-multiple-in-item-focus`));
+    });
+  });
 });
 
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-checked-in-item-focus-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-checked-in-item-focus-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..1be06a94b4a
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-checked-in-item-focus-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-checked-in-item-focus-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-checked-in-item-focus-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..84b9edb9c57
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-checked-in-item-focus-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-checked-in-item-focus-ios-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-checked-in-item-focus-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..e84bc18b245
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-checked-in-item-focus-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-checked-in-item-focus-md-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-checked-in-item-focus-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..b47ebef469d
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-checked-in-item-focus-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-checked-in-item-focus-md-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-checked-in-item-focus-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..c5e3a593471
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-checked-in-item-focus-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-checked-in-item-focus-md-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-checked-in-item-focus-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..8413dbc03de
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-checked-in-item-focus-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-clickable-item-focus-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-clickable-item-focus-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..5195cd52528
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-clickable-item-focus-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-clickable-item-focus-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-clickable-item-focus-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..a8475f7d878
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-clickable-item-focus-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-clickable-item-focus-ios-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-clickable-item-focus-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..e6fa988e194
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-clickable-item-focus-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-clickable-item-focus-md-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-clickable-item-focus-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..252ec2fcbad
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-clickable-item-focus-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-clickable-item-focus-md-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-clickable-item-focus-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..de728a0078b
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-clickable-item-focus-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-clickable-item-focus-md-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-clickable-item-focus-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..7585764f621
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-clickable-item-focus-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..b7c449e6f9e
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-ios-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..b465b40ad93
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-md-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..40d72cf339f
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-md-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..3101f22b855
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-md-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..247aba9eb13
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-focus-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-focus-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..3d9e7f4f7a8
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-focus-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-focus-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-focus-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..d7fc1740783
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-focus-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-focus-ios-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-focus-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..987bc5d9b19
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-focus-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-focus-md-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-focus-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..e919e470843
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-focus-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-focus-md-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-focus-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..d5a636afb4a
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-focus-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-focus-md-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-focus-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..393c0e0bcd6
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-focus-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..de660abf936
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..f5f925dabe6
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-ios-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..40be000b83a
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-md-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..82895bd4516
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-md-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..723a11e9d84
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-md-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..c5297bc2d64
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/item/index.html b/core/src/components/checkbox/test/item/index.html
index 2548cbfaad0..60582e73abc 100644
--- a/core/src/components/checkbox/test/item/index.html
+++ b/core/src/components/checkbox/test/item/index.html
@@ -15,7 +15,7 @@
     <style>
       .grid {
         display: grid;
-        grid-template-columns: repeat(3, minmax(250px, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
         grid-row-gap: 20px;
         grid-column-gap: 20px;
       }
@@ -245,6 +245,19 @@ <h1>Multiline Label</h1>
             </ion-item>
           </div>
         </div>
+
+        <h1>Multiple Inputs</h1>
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Two Checkboxes (multi-input item). Focus is on the input, not the item.</h2>
+            <ion-list>
+              <ion-item>
+                <ion-checkbox justify="start">Checkbox 1</ion-checkbox>
+                <ion-checkbox justify="start">Checkbox 2</ion-checkbox>
+              </ion-item>
+            </ion-list>
+          </div>
+        </div>
       </ion-content>
 
       <script>
diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss
index b17649265db..e51b931c610 100644
--- a/core/src/components/item/item.scss
+++ b/core/src/components/item/item.scss
@@ -369,7 +369,10 @@ a {
 
   text-overflow: ellipsis;
 
+  // Makes the wrapper a scroll container, which zeroes its automatic minimum
+  // size and lets long labels ellipsize
   overflow: inherit;
+
   box-sizing: border-box;
 }
 
@@ -384,6 +387,17 @@ a {
   flex-direction: column;
 }
 
+// Item Focus Indicator Room
+// --------------------------------------------------
+// Widens the clip boundary so a focus indicator on a control in the default
+// slot isn't cut off. Scoped because the wider painted box overlaps end slot
+// content on items with nothing overhanging
+
+:host(.item-focus-indicator-room) .input-wrapper {
+  @include margin-horizontal(-$item-input-focus-indicator-room);
+  @include padding-horizontal($item-input-focus-indicator-room);
+}
+
 // Item w/ Multiple Inputs
 // --------------------------------------------------
 // Multiple inputs in an item should have the input
@@ -415,4 +429,3 @@ a {
 ion-ripple-effect {
   color: var(--ripple-color);
 }
-
diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx
index 9e268e972f8..45eea6867d3 100644
--- a/core/src/components/item/item.tsx
+++ b/core/src/components/item/item.tsx
@@ -1,5 +1,5 @@
 import type { ComponentInterface } from '@stencil/core';
-import { Component, Element, Host, Listen, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
+import { Build, Component, Element, Host, Listen, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
 import type { AnchorInterface, ButtonInterface } from '@utils/element-interface';
 import type { Attributes } from '@utils/helpers';
 import { inheritAttributes, raf } from '@utils/helpers';
@@ -10,6 +10,8 @@ import { getIonMode } from '../../global/ionic-global';
 import type { AnimationBuilder, Color, CssClassMap, StyleEventDetail } from '../../interface';
 import type { RouterDirection } from '../router/utils/interface';
 
+const INDICATOR_CONTROL_SELECTOR = 'ion-checkbox, ion-radio, ion-toggle';
+
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
@@ -34,12 +36,15 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
   private labelColorStyles = {};
   private itemStyles = new Map<string, CssClassMap>();
   private inheritedAriaAttributes: Attributes = {};
+  private indicatorControlObserver?: MutationObserver;
+  private didLoad = false;
 
   @Element() el!: HTMLIonItemElement;
 
   @State() multipleInputs = false;
   @State() focusable = true;
   @State() isInteractive = false;
+  @State() hasSlottedIndicatorControl = false;
 
   /**
    * The color to use from your application's color palette.
@@ -166,6 +171,15 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
 
   connectedCallback() {
     this.hasStartEl();
+
+    /**
+     * `componentDidLoad` doesn't run again when the item is moved, so re-arm the
+     * observer and re-read the light DOM, which may have changed while detached.
+     */
+    if (this.didLoad) {
+      this.watchForIndicatorControls();
+      this.updateInteractivityOnSlotChange();
+    }
   }
 
   componentWillLoad() {
@@ -176,8 +190,19 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
     raf(() => {
       this.setMultipleInputs();
       this.setIsInteractive();
+      this.setHasSlottedIndicatorControl();
       this.focusable = this.isFocusable();
     });
+
+    this.watchForIndicatorControls();
+    this.didLoad = true;
+  }
+
+  disconnectedCallback() {
+    if (this.indicatorControlObserver) {
+      this.indicatorControlObserver.disconnect();
+      this.indicatorControlObserver = undefined;
+    }
   }
 
   private totalNestedInputs() {
@@ -222,10 +247,61 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
     this.isInteractive = covers.length > 0 || inputs.length > 0 || clickables.length > 0;
   }
 
+  /**
+   * `slotchange` only fires for nodes assigned directly to a slot, so a control
+   * inside a slotted wrapper (`<div><ion-toggle>`) never reaches
+   * `updateInteractivityOnSlotChange`. The light DOM is observed instead.
+   *
+   * The callback runs the whole handler because a control below a wrapper can also
+   * make the item multi-input, which is what decides whether the controls draw
+   * their own indicator at all.
+   *
+   * `:host(:has())` would avoid the observer, but the `:has()` fallback in
+   * `core.scss` is still open as FW-6106 and it's unreliable for slotted content
+   * in Android WebView. Worth revisiting when FW-6106 closes.
+   */
+  private watchForIndicatorControls() {
+    if (!Build.isBrowser || typeof MutationObserver === 'undefined') {
+      return;
+    }
+
+    // `Node.moveBefore` relocates the item without either callback firing, so
+    // never leave a previous observer behind
+    this.indicatorControlObserver?.disconnect();
+
+    this.indicatorControlObserver = new MutationObserver((records) => {
+      // The subtree observer also fires for text and hidden input churn, so only
+      // re-read the DOM when a control was added or removed
+      if (records.some(touchesIndicatorControl)) {
+        this.updateInteractivityOnSlotChange();
+      }
+    });
+    this.indicatorControlObserver.observe(this.el, { childList: true, subtree: true });
+  }
+
+  // These controls paint a focus indicator that overhangs their own bounds, and
+  // only the default slot is clipped, so only a control there needs extra room.
+  private setHasSlottedIndicatorControl() {
+    const controls = this.el.querySelectorAll<HTMLElement>(INDICATOR_CONTROL_SELECTOR);
+
+    this.hasSlottedIndicatorControl = Array.from(controls).some((control) => {
+      // The control isn't always a direct child, so walk up to the element the item
+      // slots, which is the one carrying the slot name.
+      let slotted: HTMLElement | null = control;
+
+      while (slotted !== null && slotted.parentElement !== this.el) {
+        slotted = slotted.parentElement;
+      }
+
+      return slotted !== null && !slotted.getAttribute('slot');
+    });
+  }
+
   // slot change listener updates state to reflect how/if item should be interactive
   private updateInteractivityOnSlotChange = () => {
     this.setIsInteractive();
     this.setMultipleInputs();
+    this.setHasSlottedIndicatorControl();
   };
 
   // If the item contains an input including a checkbox, datetime, select, or radio
@@ -361,6 +437,13 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
     const firstInteractiveNeedsPointerCursor =
       firstInteractive !== undefined && !['ION-INPUT', 'ION-TEXTAREA'].includes(firstInteractive.tagName);
 
+    /**
+     * A control in a single-input item defers its indicator to the item, so there's
+     * nothing to clip and nothing to make room for. It draws its own indicator in a
+     * multi-input item, and in a clickable item, which is a second tab stop.
+     */
+    const slottedIndicatorNeedsRoom = this.hasSlottedIndicatorControl && (multipleInputs || this.isClickable());
+
     return (
       <Host
         aria-disabled={ariaDisabled}
@@ -376,6 +459,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
             'item-disabled': disabled,
             'in-list': inList,
             'item-multiple-inputs': this.multipleInputs,
+            'item-focus-indicator-room': slottedIndicatorNeedsRoom,
             'ion-activatable': canActivate,
             'ion-focusable': this.focusable,
             'item-rtl': document.dir === 'rtl',
@@ -414,3 +498,16 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
     );
   }
 }
+
+const isIndicatorControl = (node: Node): boolean => {
+  if (node.nodeType !== Node.ELEMENT_NODE) {
+    return false;
+  }
+
+  const el = node as Element;
+
+  return el.matches(INDICATOR_CONTROL_SELECTOR) || el.querySelector(INDICATOR_CONTROL_SELECTOR) !== null;
+};
+
+const touchesIndicatorControl = (record: MutationRecord): boolean =>
+  Array.from(record.addedNodes).some(isIndicatorControl) || Array.from(record.removedNodes).some(isIndicatorControl);
diff --git a/core/src/components/item/item.vars.scss b/core/src/components/item/item.vars.scss
index d0ebad2ee19..2c48c677f05 100644
--- a/core/src/components/item/item.vars.scss
+++ b/core/src/components/item/item.vars.scss
@@ -2,3 +2,7 @@
 
 // Item
 // --------------------------------------------------
+
+// Room for the focus indicator to paint outside a slotted control. Widest
+// overhang is the iOS radio: a 36px indicator around a 15px icon.
+$item-input-focus-indicator-room: 12px;
diff --git a/core/src/components/item/test/item.spec.tsx b/core/src/components/item/test/item.spec.tsx
index ed82925d3a4..f07b2a58461 100644
--- a/core/src/components/item/test/item.spec.tsx
+++ b/core/src/components/item/test/item.spec.tsx
@@ -19,4 +19,59 @@ describe('item', () => {
     // Check if it has the expected class that gives the focused styles to the item element
     expect(item).toHaveClass('ion-focusable');
   });
+
+  describe('focus indicator room', () => {
+    const newItemPage = async (html: string) => {
+      const page = await newSpecPage({ components: [Item], html });
+
+      // The slotted-control check runs in a raf after load, so let the frame
+      // callback fire before asserting on the rendered class.
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      await page.waitForChanges();
+
+      return page.body.querySelector('ion-item')!;
+    };
+
+    it('should reserve room for a control in the default slot of a multi-input item', async () => {
+      const item = await newItemPage(
+        `<ion-item><ion-checkbox>One</ion-checkbox><ion-checkbox>Two</ion-checkbox></ion-item>`
+      );
+
+      expect(item).toHaveClass('item-focus-indicator-room');
+    });
+
+    it('should reserve room for a control in the default slot of a clickable item', async () => {
+      const item = await newItemPage(`<ion-item button><ion-toggle>Label</ion-toggle></ion-item>`);
+
+      expect(item).toHaveClass('item-focus-indicator-room');
+    });
+
+    it('should reserve room for a control nested below the slotted element', async () => {
+      const item = await newItemPage(`<ion-item button><div><ion-radio>Label</ion-radio></div></ion-item>`);
+
+      expect(item).toHaveClass('item-focus-indicator-room');
+    });
+
+    // A lone control has the item's input cover and lets the item draw the indicator,
+    // so there's nothing overhanging the wrapper to make room for.
+    it('should not reserve room for a control that defers its indicator to the item', async () => {
+      const item = await newItemPage(`<ion-item><ion-checkbox>Label</ion-checkbox></ion-item>`);
+
+      expect(item).not.toHaveClass('item-focus-indicator-room');
+    });
+
+    it('should not reserve room for controls outside the default slot', async () => {
+      const item = await newItemPage(
+        `<ion-item><ion-toggle slot="start">Start</ion-toggle>Text<ion-toggle slot="end">End</ion-toggle></ion-item>`
+      );
+
+      expect(item).not.toHaveClass('item-focus-indicator-room');
+    });
+
+    it('should not reserve room when no control is slotted', async () => {
+      const item = await newItemPage(`<ion-item><ion-label>Label</ion-label></ion-item>`);
+
+      expect(item).not.toHaveClass('item-focus-indicator-room');
+    });
+  });
 });
diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts b/core/src/components/item/test/slotted-inputs/item.e2e.ts
index 7fcbf4b8b1e..b84dfc50abb 100644
--- a/core/src/components/item/test/slotted-inputs/item.e2e.ts
+++ b/core/src/components/item/test/slotted-inputs/item.e2e.ts
@@ -172,3 +172,64 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+/**
+ * This behavior does not vary across modes/directions.
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('item: focus indicator room'), () => {
+    test('should reserve room for a control added inside a slotted wrapper', async ({ page }) => {
+      // A control can appear inside an already slotted wrapper after the item renders,
+      // and the item still has to make room for its focus indicator.
+      await page.setContent(
+        `
+        <ion-item button>
+          <div id="wrapper"></div>
+        </ion-item>
+      `,
+        config
+      );
+
+      const item = page.locator('ion-item');
+
+      await expect(item).not.toHaveClass(/item-focus-indicator-room/);
+
+      await page.evaluate(() => {
+        document.querySelector('#wrapper')!.appendChild(document.createElement('ion-toggle'));
+      });
+
+      await expect(item).toHaveClass(/item-focus-indicator-room/);
+
+      await page.evaluate(() => {
+        document.querySelector('ion-toggle')!.remove();
+      });
+
+      await expect(item).not.toHaveClass(/item-focus-indicator-room/);
+    });
+
+    test('should mark the item multi-input when a control is added inside a slotted wrapper', async ({ page }) => {
+      // Whether a control draws its own indicator depends on this class, so it has to
+      // track the same mutations the room does.
+      await page.setContent(
+        `
+        <ion-item>
+          <ion-checkbox>One</ion-checkbox>
+          <div id="wrapper"></div>
+        </ion-item>
+      `,
+        config
+      );
+
+      const item = page.locator('ion-item');
+
+      await expect(item).not.toHaveClass(/item-multiple-inputs/);
+
+      await page.evaluate(() => {
+        document.querySelector('#wrapper')!.appendChild(document.createElement('ion-checkbox'));
+      });
+
+      await expect(item).toHaveClass(/item-multiple-inputs/);
+      await expect(item).toHaveClass(/item-focus-indicator-room/);
+    });
+  });
+});
diff --git a/core/src/components/radio/radio.ios.scss b/core/src/components/radio/radio.ios.scss
index 775239a9ea1..f208cb083fb 100644
--- a/core/src/components/radio/radio.ios.scss
+++ b/core/src/components/radio/radio.ios.scss
@@ -44,25 +44,6 @@
   opacity: $radio-ios-disabled-opacity;
 }
 
-// iOS Radio: Keyboard Focus
-// -----------------------------------------
-
-:host(.ion-focused) .radio-icon::after {
-  @include border-radius(var(--inner-border-radius));
-  @include position(-8px, null, null, -9px);
-
-  display: block;
-  position: absolute;
-
-  width: 36px;
-  height: 36px;
-
-  background: $radio-ios-background-color-focused;
-
-  content: "";
-  opacity: 0.2;
-}
-
 // Radio Native Wrapper
 // ----------------------------------------------------------------
 
diff --git a/core/src/components/radio/radio.ios.vars.scss b/core/src/components/radio/radio.ios.vars.scss
index 2c971126436..46f068f15a5 100644
--- a/core/src/components/radio/radio.ios.vars.scss
+++ b/core/src/components/radio/radio.ios.vars.scss
@@ -4,9 +4,6 @@
 // iOS Radio
 // --------------------------------------------------
 
-/// @prop - Background color of focus indicator for radio when focused
-$radio-ios-background-color-focused:  ion-color(primary, tint);
-
 /// @prop - Width of the radio icon
 $radio-ios-icon-width:                dynamic-font(15px);
 
diff --git a/core/src/components/radio/radio.md.scss b/core/src/components/radio/radio.md.scss
index ba6296bcbc5..a057177ae77 100644
--- a/core/src/components/radio/radio.md.scss
+++ b/core/src/components/radio/radio.md.scss
@@ -76,24 +76,6 @@
   opacity: $radio-md-icon-disabled-opacity;
 }
 
-// Material Design Radio: Keyboard Focus
-// -----------------------------------------
-
-:host(.ion-focused) .radio-icon::after {
-  @include border-radius(var(--inner-border-radius));
-
-  display: block;
-  position: absolute;
-
-  width: 36px;
-  height: 36px;
-
-  background: $radio-md-background-color-focused;
-
-  content: "";
-  opacity: 0.2;
-}
-
 // Radio Native Wrapper
 // ----------------------------------------------------------------
 
diff --git a/core/src/components/radio/radio.md.vars.scss b/core/src/components/radio/radio.md.vars.scss
index 99dca7c1c56..4ff1b9fd094 100644
--- a/core/src/components/radio/radio.md.vars.scss
+++ b/core/src/components/radio/radio.md.vars.scss
@@ -7,9 +7,6 @@
 /// @prop - Color of the checked radio
 $radio-md-color-on:                  current-color(base);
 
-/// @prop - Background color of focus indicator for radio when focused
-$radio-md-background-color-focused:  ion-color(primary, tint);
-
 /// @prop - Color of the unchecked radio
 $radio-md-color-off:                 rgb($text-color-rgb, 0.60);
 
diff --git a/core/src/components/radio/radio.scss b/core/src/components/radio/radio.scss
index 8f875811e88..953397061e5 100644
--- a/core/src/components/radio/radio.scss
+++ b/core/src/components/radio/radio.scss
@@ -1,4 +1,3 @@
-@import "../../themes/ionic.globals";
 @import "./radio.vars.scss";
 
 // Radio
@@ -53,6 +52,7 @@ input {
   @include visually-hidden();
 }
 
+// Hide the native focus ring since we draw our own focus indicator.
 :host(:focus) {
   outline: none;
 }
@@ -80,6 +80,24 @@ input {
   width: auto;
 }
 
+// Radio: Keyboard Focus
+// ---------------------------------------------
+
+:host(.ion-focused) .radio-icon::after {
+  @include border-radius(var(--inner-border-radius));
+
+  display: block;
+  position: absolute;
+
+  width: 36px;
+  height: 36px;
+
+  background: $radio-background-color-focused;
+
+  content: "";
+  opacity: 0.2;
+}
+
 // Radio Wrapper
 // --------------------------------------------------
 .radio-wrapper {
diff --git a/core/src/components/radio/radio.tsx b/core/src/components/radio/radio.tsx
index bb343c8c858..e05dc8c6c24 100644
--- a/core/src/components/radio/radio.tsx
+++ b/core/src/components/radio/radio.tsx
@@ -1,6 +1,6 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
-import { isOptionSelected } from '@utils/forms';
+import { Component, Element, Event, Host, Method, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
+import { createItemMultipleInputsObserver, isOptionSelected } from '@utils/forms';
 import { addEventListener, removeEventListener } from '@utils/helpers';
 import { createColorClasses, hostContext } from '@utils/theme';
 
@@ -27,6 +27,7 @@ import type { Color } from '../../interface';
 export class Radio implements ComponentInterface {
   private inputId = `ion-rb-${radioButtonIds++}`;
   private radioGroup: HTMLIonRadioGroupElement | null = null;
+  private itemFocusObserver?: MutationObserver;
 
   @Element() el!: HTMLIonRadioElement;
 
@@ -150,6 +151,8 @@ export class Radio implements ComponentInterface {
       this.updateState();
       addEventListener(radioGroup, 'ionValueChange', this.updateState);
     }
+
+    this.itemFocusObserver = createItemMultipleInputsObserver(this.el, () => forceUpdate(this));
   }
 
   disconnectedCallback() {
@@ -158,6 +161,10 @@ export class Radio implements ComponentInterface {
       removeEventListener(radioGroup, 'ionValueChange', this.updateState);
       this.radioGroup = null;
     }
+    if (this.itemFocusObserver) {
+      this.itemFocusObserver.disconnect();
+      this.itemFocusObserver = undefined;
+    }
   }
 
   private updateState = () => {
@@ -216,6 +223,7 @@ export class Radio implements ComponentInterface {
     const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
     const mode = getIonMode(this);
     const inItem = hostContext('ion-item', el);
+    const inMultipleInputsItem = hostContext('ion-item.item-multiple-inputs', el);
 
     return (
       <Host
@@ -230,9 +238,11 @@ export class Radio implements ComponentInterface {
           [`radio-justify-${justify}`]: justify !== undefined,
           [`radio-alignment-${alignment}`]: alignment !== undefined,
           [`radio-label-placement-${labelPlacement}`]: true,
-          // Focus and active styling should not apply when the radio is in an item
+          // A single-input item has the input cover and draws the indicator itself.
+          // A multi-input item has no cover, so each control draws its own. Active
+          // styling stays suppressed either way.
           'ion-activatable': !inItem,
-          'ion-focusable': !inItem,
+          'ion-focusable': !inItem || inMultipleInputsItem,
         })}
         role="radio"
         aria-checked={checked ? 'true' : 'false'}
diff --git a/core/src/components/radio/radio.vars.scss b/core/src/components/radio/radio.vars.scss
index b578bb69969..c1cd1926bc5 100644
--- a/core/src/components/radio/radio.vars.scss
+++ b/core/src/components/radio/radio.vars.scss
@@ -1,5 +1,10 @@
+@import "../../themes/ionic.globals";
+
 /// @prop - Top margin of radio's label when in an item
 $radio-item-label-margin-top: 10px;
 
 /// @prop - Bottom margin of radio's label when in an item
-$radio-item-label-margin-bottom: 10px;
\ No newline at end of file
+$radio-item-label-margin-bottom: 10px;
+
+/// @prop - Background color of focus indicator for radio when focused
+$radio-background-color-focused: ion-color(primary, tint);
diff --git a/core/src/components/radio/test/a11y/radio.e2e.ts b/core/src/components/radio/test/a11y/radio.e2e.ts
index df92c82c4ca..a4abb0d7cb5 100644
--- a/core/src/components/radio/test/a11y/radio.e2e.ts
+++ b/core/src/components/radio/test/a11y/radio.e2e.ts
@@ -55,7 +55,7 @@ configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title,
       expect(results.violations).toEqual([]);
     });
     test.describe(title('radio: keyboard navigation'), () => {
-      test.beforeEach(async ({ page, browserName }) => {
+      test.beforeEach(async ({ page }) => {
         await page.setContent(
           `
         <ion-app>
@@ -98,20 +98,13 @@ configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title,
           config
         );
 
-        if (browserName === 'webkit') {
-          const radio = page.locator('#first-group ion-radio').first();
-          /**
-           * Sometimes Safari does not focus the first radio.
-           * This is a workaround to ensure the first radio is focused.
-           *
-           * Wait for the first radio to be rendered before tabbing.
-           * This is necessary because the first radio may not be rendered
-           * when the page first loads.
-           *
-           * This would cause the first radio to be skipped when tabbing.
-           */
-          await radio.waitFor();
-        }
+        /**
+         * The group assigns `tabindex` in its `componentDidLoad` and each radio
+         * re-renders to pick it up. Tabbing before that lands on something else,
+         * and focus never comes back to the first radio.
+         */
+        await expect(page.locator('#first-group ion-radio').first()).toHaveAttribute('tabindex', '0');
+        await expect(page.locator('#second-group ion-radio').first()).toHaveAttribute('tabindex', '0');
       });
 
       test('tabbing should switch between radio groups', async ({ page, pageUtils }) => {
@@ -150,6 +143,72 @@ configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title,
   });
 });
 
+/**
+ * These assert `ion-focusable`, not the rendered ring, because `ion-focused`
+ * relies on keyboard-mode detection that is flaky on WebKit. Gating is mode-independent.
+ */
+configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, config }) => {
+  test.describe(title('radio: focus indicator'), () => {
+    test('standalone radio should be focusable', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-radio-group value="a">
+            <ion-radio value="a" aria-label="Radio">Radio</ion-radio>
+          </ion-radio-group>
+        </ion-app>
+      `,
+        config
+      );
+
+      const radio = page.locator('ion-radio');
+      await expect(radio).toHaveClass(/ion-focusable/);
+    });
+
+    test('radio in a single-input item should not show its own focus indicator', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-radio-group value="a">
+            <ion-item>
+              <ion-radio value="a">Radio</ion-radio>
+            </ion-item>
+          </ion-radio-group>
+        </ion-app>
+      `,
+        config
+      );
+
+      const radio = page.locator('ion-radio');
+      const item = page.locator('ion-item');
+      await expect(radio).not.toHaveClass(/ion-focusable/);
+      await expect(item).toHaveClass(/ion-focusable/);
+    });
+
+    test('radio in a multi-input item should be focusable', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-item>
+            <ion-radio-group value="a">
+              <ion-radio value="a">Radio 1</ion-radio>
+            </ion-radio-group>
+            <ion-radio-group value="b">
+              <ion-radio value="b">Radio 2</ion-radio>
+            </ion-radio-group>
+          </ion-item>
+        </ion-app>
+      `,
+        config
+      );
+
+      const radios = page.locator('ion-radio');
+      await expect(radios.nth(0)).toHaveClass(/ion-focusable/);
+      await expect(radios.nth(1)).toHaveClass(/ion-focusable/);
+    });
+  });
+});
+
 /**
  * This behavior does not vary across directions
  */
diff --git a/core/src/components/radio/test/basic/radio.e2e.ts b/core/src/components/radio/test/basic/radio.e2e.ts
new file mode 100644
index 00000000000..eae4c6947db
--- /dev/null
+++ b/core/src/components/radio/test/basic/radio.e2e.ts
@@ -0,0 +1,69 @@
+import { expect } from '@playwright/test';
+import { applyKeyboardFocus, configs, test } from '@utils/test/playwright';
+
+/**
+ * This behavior does not vary across directions
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('radio: focus visual'), () => {
+    test('should render focus indicator when unchecked', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          #container {
+            width: fit-content;
+            padding: 10px;
+          }
+        </style>
+
+        <ion-app>
+          <div id="container">
+            <ion-radio-group>
+              <ion-radio value="a">Unchecked</ion-radio>
+            </ion-radio-group>
+          </div>
+        </ion-app>
+      `,
+        config
+      );
+
+      const radio = page.locator('ion-radio');
+
+      await applyKeyboardFocus(page, radio);
+
+      const container = page.locator('#container');
+
+      await expect(container).toHaveScreenshot(screenshot(`radio-focus`));
+    });
+
+    test('should render focus indicator when checked', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          #container {
+            width: fit-content;
+            padding: 10px;
+          }
+        </style>
+
+        <ion-app>
+          <div id="container">
+            <ion-radio-group value="a">
+              <ion-radio value="a">Checked</ion-radio>
+            </ion-radio-group>
+          </div>
+        </ion-app>
+      `,
+        config
+      );
+
+      const radio = page.locator('ion-radio');
+
+      await applyKeyboardFocus(page, radio);
+
+      const container = page.locator('#container');
+
+      await expect(container).toHaveScreenshot(screenshot(`radio-focus-checked`));
+    });
+  });
+});
diff --git a/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-checked-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-checked-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..5ff92f5d5e3
Binary files /dev/null and b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-checked-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-checked-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-checked-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..ab13bbaa13c
Binary files /dev/null and b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-checked-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-checked-ios-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-checked-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..f8c844b5351
Binary files /dev/null and b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-checked-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-checked-md-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-checked-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..af756eb1be7
Binary files /dev/null and b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-checked-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-checked-md-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-checked-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..c0e80459e81
Binary files /dev/null and b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-checked-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-checked-md-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-checked-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..e1f652a322a
Binary files /dev/null and b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-checked-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..749bbf84999
Binary files /dev/null and b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..6a7c560e590
Binary files /dev/null and b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-ios-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..595e0f81d24
Binary files /dev/null and b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-md-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..828d7ce2f16
Binary files /dev/null and b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-md-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..ff068041cb7
Binary files /dev/null and b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-md-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..a89aa121456
Binary files /dev/null and b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/item/index.html b/core/src/components/radio/test/item/index.html
index 36e46779fd2..e33e518d156 100644
--- a/core/src/components/radio/test/item/index.html
+++ b/core/src/components/radio/test/item/index.html
@@ -15,7 +15,7 @@
     <style>
       .grid {
         display: grid;
-        grid-template-columns: repeat(3, minmax(250px, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
         grid-row-gap: 20px;
         grid-column-gap: 20px;
       }
@@ -205,6 +205,23 @@ <h1>Multiline Label</h1>
             </ion-radio-group>
           </div>
         </div>
+
+        <h1>Multiple Inputs</h1>
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Two Radios (multi-input item). Focus is on the input, not the item.</h2>
+            <ion-list>
+              <ion-item>
+                <ion-radio-group allow-empty-selection value="1"
+                  ><ion-radio value="1" justify="start">Radio 1</ion-radio></ion-radio-group
+                >
+                <ion-radio-group allow-empty-selection value="2"
+                  ><ion-radio value="2" justify="start">Radio 2</ion-radio></ion-radio-group
+                >
+              </ion-item>
+            </ion-list>
+          </div>
+        </div>
       </ion-content>
     </ion-app>
   </body>
diff --git a/core/src/components/radio/test/item/radio.e2e.ts b/core/src/components/radio/test/item/radio.e2e.ts
index 8c9fd4be951..c72e0beb4f9 100644
--- a/core/src/components/radio/test/item/radio.e2e.ts
+++ b/core/src/components/radio/test/item/radio.e2e.ts
@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
+import { applyKeyboardFocus, configs, test } from '@utils/test/playwright';
 
 configs().forEach(({ title, screenshot, config }) => {
   test.describe(title('radio: item'), () => {
@@ -80,6 +80,121 @@ configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, co
   });
 });
 
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('radio: multiple inputs in item'), () => {
+    test('should not have visual regressions with multiple radios in an item', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-list>
+            <ion-item>
+              <ion-radio-group value="1"><ion-radio value="1" justify="start">Radio 1</ion-radio></ion-radio-group>
+              <ion-radio-group value="2"><ion-radio value="2" justify="start">Radio 2</ion-radio></ion-radio-group>
+            </ion-item>
+          </ion-list>
+        `,
+        config
+      );
+      const list = page.locator('ion-list');
+      await expect(list).toHaveScreenshot(screenshot(`radio-multiple-in-item`));
+    });
+  });
+});
+
+/**
+ * This behavior does not vary across directions
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('radio: focus in item'), () => {
+    test('should render focus indicator in an item', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-item>
+            <ion-radio-group>
+              <ion-radio value="a">Unchecked</ion-radio>
+            </ion-radio-group>
+          </ion-item>
+        </ion-app>
+      `,
+        config
+      );
+
+      const radio = page.locator('ion-radio');
+      const item = page.locator('ion-item');
+
+      await applyKeyboardFocus(page, radio, item);
+
+      await expect(item).toHaveScreenshot(screenshot(`radio-in-item-focus`));
+    });
+
+    test('should render focus indicator for a checked radio in an item', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-item>
+            <ion-radio-group value="a">
+              <ion-radio value="a">Checked</ion-radio>
+            </ion-radio-group>
+          </ion-item>
+        </ion-app>
+      `,
+        config
+      );
+
+      const radio = page.locator('ion-radio');
+      const item = page.locator('ion-item');
+
+      await applyKeyboardFocus(page, radio, item);
+
+      await expect(item).toHaveScreenshot(screenshot(`radio-checked-in-item-focus`));
+    });
+
+    test('should render focus indicator for a radio in a clickable item', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-item button>
+            <ion-radio-group>
+              <ion-radio value="a">Unchecked</ion-radio>
+            </ion-radio-group>
+          </ion-item>
+        </ion-app>
+      `,
+        config
+      );
+
+      const radio = page.locator('ion-radio');
+      const item = page.locator('ion-item');
+
+      await applyKeyboardFocus(page, radio);
+
+      await expect(item).toHaveScreenshot(screenshot(`radio-in-clickable-item-focus`));
+    });
+
+    test('should render focus indicator for a radio in a multi-input item', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-item>
+            <ion-radio-group value="a"><ion-radio value="a" justify="start">Radio 1</ion-radio></ion-radio-group>
+            <ion-radio-group value="b"><ion-radio value="b" justify="start">Radio 2</ion-radio></ion-radio-group>
+          </ion-item>
+        </ion-app>
+      `,
+        config
+      );
+
+      const radio = page.locator('ion-radio').first();
+
+      await applyKeyboardFocus(page, radio);
+
+      const item = page.locator('ion-item');
+
+      await expect(item).toHaveScreenshot(screenshot(`radio-multiple-in-item-focus`));
+    });
+  });
+});
+
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('radio: item functionality'), () => {
     test('clicking padded space within item should click the radio', async ({ page }) => {
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-checked-in-item-focus-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-checked-in-item-focus-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..5c7211b0b8d
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-checked-in-item-focus-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-checked-in-item-focus-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-checked-in-item-focus-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..80c70ee387c
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-checked-in-item-focus-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-checked-in-item-focus-ios-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-checked-in-item-focus-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..4e2a3638556
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-checked-in-item-focus-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-checked-in-item-focus-md-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-checked-in-item-focus-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..d120afb4dfb
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-checked-in-item-focus-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-checked-in-item-focus-md-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-checked-in-item-focus-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..492778e530b
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-checked-in-item-focus-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-checked-in-item-focus-md-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-checked-in-item-focus-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..9dadfb13cc8
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-checked-in-item-focus-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-clickable-item-focus-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-clickable-item-focus-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..beed89b0aaa
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-clickable-item-focus-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-clickable-item-focus-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-clickable-item-focus-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..75aad08e4ea
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-clickable-item-focus-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-clickable-item-focus-ios-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-clickable-item-focus-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..95ddb377abb
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-clickable-item-focus-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-clickable-item-focus-md-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-clickable-item-focus-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..9544d238c3f
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-clickable-item-focus-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-clickable-item-focus-md-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-clickable-item-focus-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..1073146d79a
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-clickable-item-focus-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-clickable-item-focus-md-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-clickable-item-focus-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..dbb23543c4e
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-clickable-item-focus-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-item-focus-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-item-focus-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..41b68fe7c60
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-item-focus-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-item-focus-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-item-focus-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..f0ce1209c7a
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-item-focus-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-item-focus-ios-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-item-focus-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..061d593a79c
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-item-focus-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-item-focus-md-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-item-focus-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..484a4e9a797
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-item-focus-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-item-focus-md-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-item-focus-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..88b7eb635e1
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-item-focus-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-item-focus-md-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-item-focus-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..4f462c72853
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-item-focus-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-focus-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-focus-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..1b38932e60d
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-focus-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-focus-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-focus-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..f0138baedf6
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-focus-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-focus-ios-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-focus-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..8d3807cbe55
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-focus-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-focus-md-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-focus-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..eb34b39c866
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-focus-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-focus-md-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-focus-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..81cc7eccb03
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-focus-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-focus-md-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-focus-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..6e06fdd42fc
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-focus-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..c28b89c7f85
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..04e2a44d04d
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-ios-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..ee5e077c527
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-md-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..bf455187b83
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-md-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..98f7c4baa72
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-md-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..7dc2b44cc98
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/a11y/toggle.e2e.ts b/core/src/components/toggle/test/a11y/toggle.e2e.ts
index 26f5e1f496f..192e68db138 100644
--- a/core/src/components/toggle/test/a11y/toggle.e2e.ts
+++ b/core/src/components/toggle/test/a11y/toggle.e2e.ts
@@ -21,3 +21,87 @@ configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title,
     });
   });
 });
+
+/**
+ * These assert `ion-focusable`, not the rendered ring, because `ion-focused`
+ * relies on keyboard-mode detection that is flaky on WebKit. Gating is mode-independent.
+ */
+configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, config }) => {
+  test.describe(title('toggle: focus indicator'), () => {
+    test('standalone toggle should be focusable', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-toggle aria-label="Toggle">Toggle</ion-toggle>
+        </ion-app>
+      `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+      await expect(toggle).toHaveClass(/ion-focusable/);
+      await expect(toggle).not.toHaveClass(/toggle-defers-indicator/);
+    });
+
+    test('toggle in a single-input item should defer the indicator to the item', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-item>
+            <ion-toggle>Toggle</ion-toggle>
+          </ion-item>
+        </ion-app>
+      `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+
+      // The toggle's `ion-focusable` is what makes the item focusable, so both carry it.
+      await expect(toggle).toHaveClass(/ion-focusable/);
+      await expect(toggle).toHaveClass(/toggle-defers-indicator/);
+      await expect(page.locator('ion-item')).toHaveClass(/ion-focusable/);
+    });
+
+    test('toggle in a clickable item should keep its own indicator', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-item button>
+            <ion-toggle>Toggle</ion-toggle>
+          </ion-item>
+        </ion-app>
+      `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+
+      // Two tab stops sharing one indicator would be indistinguishable.
+      await expect(page.locator('ion-item')).toHaveClass(/ion-activatable/);
+      await expect(toggle).not.toHaveClass(/toggle-defers-indicator/);
+    });
+
+    test('toggle in a multi-input item should be focusable', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-item>
+            <ion-toggle>Toggle 1</ion-toggle>
+            <ion-toggle>Toggle 2</ion-toggle>
+          </ion-item>
+        </ion-app>
+      `,
+        config
+      );
+
+      const toggles = page.locator('ion-toggle');
+      await expect(toggles.nth(0)).toHaveClass(/ion-focusable/);
+      await expect(toggles.nth(1)).toHaveClass(/ion-focusable/);
+
+      // No single indicator to defer to, so each toggle draws its own.
+      await expect(toggles.nth(0)).not.toHaveClass(/toggle-defers-indicator/);
+      await expect(toggles.nth(1)).not.toHaveClass(/toggle-defers-indicator/);
+    });
+  });
+});
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts b/core/src/components/toggle/test/basic/toggle.e2e.ts
index 9502df83b55..2dc8a89d2e4 100644
--- a/core/src/components/toggle/test/basic/toggle.e2e.ts
+++ b/core/src/components/toggle/test/basic/toggle.e2e.ts
@@ -1,10 +1,10 @@
 import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
+import { applyKeyboardFocus, configs, test } from '@utils/test/playwright';
 
 /**
  * This behavior does not vary across modes/directions
  */
-configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('toggle: ionChange'), () => {
     test('should fire ionChange when interacting with toggle', async ({ page }) => {
       await page.setContent(
@@ -95,48 +95,6 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
   });
 
   test.describe(title('toggle: ionFocus'), () => {
-    test('should not have visual regressions', async ({ page, pageUtils }) => {
-      await page.setContent(
-        `
-        <style>
-          #container {
-            display: inline-block;
-            padding: 10px;
-          }
-        </style>
-
-        <div id="container">
-          <ion-toggle>Unchecked</ion-toggle>
-        </div>
-      `,
-        config
-      );
-
-      await pageUtils.pressKeys('Tab');
-
-      const container = page.locator('#container');
-
-      await expect(container).toHaveScreenshot(screenshot(`toggle-focus`));
-    });
-
-    test('should not have visual regressions when interacting with toggle in item', async ({ page, pageUtils }) => {
-      await page.setContent(
-        `
-        <ion-item class="ion-focused">
-          <ion-toggle>Unchecked</ion-toggle>
-        </ion-item>
-      `,
-        config
-      );
-
-      // Test focus with keyboard navigation
-      await pageUtils.pressKeys('Tab');
-
-      const item = page.locator('ion-item');
-
-      await expect(item).toHaveScreenshot(screenshot(`toggle-in-item-focus`));
-    });
-
     test('should fire ionFocus when toggle is focused', async ({ page, pageUtils }) => {
       await page.setContent(
         `
@@ -285,3 +243,66 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
     });
   });
 });
+
+/**
+ * This behavior does not vary across directions
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('toggle: focus visual'), () => {
+    test('should render focus indicator when unchecked', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          #container {
+            width: fit-content;
+            padding: 10px;
+          }
+        </style>
+
+        <ion-app>
+          <div id="container">
+            <ion-toggle>Unchecked</ion-toggle>
+          </div>
+        </ion-app>
+      `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+
+      await applyKeyboardFocus(page, toggle);
+
+      const container = page.locator('#container');
+
+      await expect(container).toHaveScreenshot(screenshot(`toggle-focus`));
+    });
+
+    test('should render focus indicator when checked', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          #container {
+            width: fit-content;
+            padding: 10px;
+          }
+        </style>
+
+        <ion-app>
+          <div id="container">
+            <ion-toggle checked>Checked</ion-toggle>
+          </div>
+        </ion-app>
+      `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+
+      await applyKeyboardFocus(page, toggle);
+
+      const container = page.locator('#container');
+
+      await expect(container).toHaveScreenshot(screenshot(`toggle-focus-checked`));
+    });
+  });
+});
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-checked-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-checked-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..f5090dcb232
Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-checked-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-checked-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-checked-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..c2afe2f5941
Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-checked-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-checked-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-checked-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..08176dd7004
Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-checked-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-checked-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-checked-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..2b0432e046b
Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-checked-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-checked-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-checked-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..800164b9640
Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-checked-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-checked-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-checked-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..20b9c1f27e1
Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-checked-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-ios-ltr-Mobile-Chrome-linux.png
index 8cfaef24db3..26dc586af8e 100644
Binary files a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-ios-ltr-Mobile-Firefox-linux.png
index bb21be2862e..856c3679238 100644
Binary files a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-ios-ltr-Mobile-Safari-linux.png
index c20935c06b8..8153ee087f6 100644
Binary files a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..a82ee6c5875
Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..8bc4ddfa407
Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..bc2c99f8353
Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-in-item-focus-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-in-item-focus-ios-ltr-Mobile-Chrome-linux.png
deleted file mode 100644
index 7d5347249a8..00000000000
Binary files a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-in-item-focus-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-in-item-focus-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-in-item-focus-ios-ltr-Mobile-Safari-linux.png
deleted file mode 100644
index 19bd30c2be0..00000000000
Binary files a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-in-item-focus-ios-ltr-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts b/core/src/components/toggle/test/color/toggle.e2e.ts
index cdebe75ec79..cb63cc33373 100644
--- a/core/src/components/toggle/test/color/toggle.e2e.ts
+++ b/core/src/components/toggle/test/color/toggle.e2e.ts
@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
+import { applyKeyboardFocus, configs, test } from '@utils/test/playwright';
 
 configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('toggle: color'), () => {
@@ -26,5 +26,61 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       const toggle = page.locator('ion-toggle');
       await expect(toggle).toHaveScreenshot(screenshot(`toggle-color-unchecked`));
     });
+
+    test('should apply color to the focus indicator when checked', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          #container {
+            width: fit-content;
+            padding: 10px;
+          }
+        </style>
+
+        <ion-app>
+          <div id="container">
+            <ion-toggle color="danger" checked="true">Label</ion-toggle>
+          </div>
+        </ion-app>
+      `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+
+      await applyKeyboardFocus(page, toggle);
+
+      const container = page.locator('#container');
+
+      await expect(container).toHaveScreenshot(screenshot(`toggle-color-focus-checked`));
+    });
+
+    test('should not apply color to the focus indicator when unchecked', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          #container {
+            width: fit-content;
+            padding: 10px;
+          }
+        </style>
+
+        <ion-app>
+          <div id="container">
+            <ion-toggle color="danger">Label</ion-toggle>
+          </div>
+        </ion-app>
+      `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+
+      await applyKeyboardFocus(page, toggle);
+
+      const container = page.locator('#container');
+
+      await expect(container).toHaveScreenshot(screenshot(`toggle-color-focus-unchecked`));
+    });
   });
 });
diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-checked-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-checked-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..5649ce582d9
Binary files /dev/null and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-checked-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-checked-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-checked-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..1c859ee105d
Binary files /dev/null and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-checked-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-checked-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-checked-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..d2d2651e795
Binary files /dev/null and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-checked-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-checked-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-checked-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..de6ed72d4be
Binary files /dev/null and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-checked-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-checked-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-checked-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..f8ef411ff1a
Binary files /dev/null and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-checked-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-checked-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-checked-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..168808ae7e1
Binary files /dev/null and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-checked-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-unchecked-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-unchecked-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..ed28f85c278
Binary files /dev/null and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-unchecked-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-unchecked-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-unchecked-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..2058c3d5e69
Binary files /dev/null and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-unchecked-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-unchecked-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-unchecked-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..ae7633dd651
Binary files /dev/null and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-unchecked-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-unchecked-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-unchecked-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..476ba9d5097
Binary files /dev/null and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-unchecked-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-unchecked-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-unchecked-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..5ff96d60a1c
Binary files /dev/null and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-unchecked-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-unchecked-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-unchecked-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..fe6f1b21513
Binary files /dev/null and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-unchecked-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/item/index.html b/core/src/components/toggle/test/item/index.html
index b872bcf3ea3..a1a29e43047 100644
--- a/core/src/components/toggle/test/item/index.html
+++ b/core/src/components/toggle/test/item/index.html
@@ -15,7 +15,7 @@
     <style>
       .grid {
         display: grid;
-        grid-template-columns: repeat(3, minmax(250px, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
         grid-row-gap: 20px;
         grid-column-gap: 20px;
       }
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts b/core/src/components/toggle/test/item/toggle.e2e.ts
index 866a382494f..cc549b9a6bc 100644
--- a/core/src/components/toggle/test/item/toggle.e2e.ts
+++ b/core/src/components/toggle/test/item/toggle.e2e.ts
@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
+import { applyKeyboardFocus, configs, test } from '@utils/test/playwright';
 
 configs().forEach(({ title, screenshot, config }) => {
   test.describe(title('toggle: item'), () => {
@@ -110,6 +110,104 @@ configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, co
   });
 });
 
+/**
+ * The focus indicator differs between iOS and MD, so these run in both modes.
+ * This behavior does not vary across directions.
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('toggle: focus in item'), () => {
+    test('should render focus indicator in an item', async ({ page }) => {
+      // The item gets `ion-focused` too, which is what suppresses the toggle's indicator.
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-item>
+            <ion-toggle>Unchecked</ion-toggle>
+          </ion-item>
+        </ion-app>
+      `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+
+      await applyKeyboardFocus(page, toggle);
+
+      const item = page.locator('ion-item');
+
+      await expect(item).toHaveScreenshot(screenshot(`toggle-in-item-focus`));
+    });
+
+    test('should render focus indicator for a checked toggle with a color in an item', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-item>
+            <ion-toggle color="danger" checked>Checked</ion-toggle>
+          </ion-item>
+        </ion-app>
+      `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+
+      await applyKeyboardFocus(page, toggle);
+
+      const item = page.locator('ion-item');
+
+      await expect(item).toHaveScreenshot(screenshot(`toggle-color-checked-in-item-focus`));
+    });
+
+    test('should render focus indicator for a toggle in a clickable item', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-item button>
+            <ion-toggle>Unchecked</ion-toggle>
+          </ion-item>
+        </ion-app>
+      `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+
+      await applyKeyboardFocus(page, toggle);
+
+      const item = page.locator('ion-item');
+
+      await expect(item).toHaveScreenshot(screenshot(`toggle-in-clickable-item-focus`));
+    });
+
+    test('should render focus indicator for a toggle in a multi-input item', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-item>
+            <ion-toggle justify="start">Toggle 1</ion-toggle>
+            <ion-toggle justify="start">Toggle 2</ion-toggle>
+          </ion-item>
+        </ion-app>
+      `,
+        config
+      );
+
+      const item = page.locator('ion-item');
+
+      // The item adds this after its controls render, and the toggles re-render off
+      // it, so waiting avoids capturing the pre-settle state.
+      await expect(item).toHaveClass(/item-multiple-inputs/);
+
+      const toggle = page.locator('ion-toggle').first();
+
+      await applyKeyboardFocus(page, toggle);
+
+      await expect(item).toHaveScreenshot(screenshot(`toggle-multiple-in-item-focus`));
+    });
+  });
+});
+
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('toggle: item functionality'), () => {
     test('clicking padded space within item should click the toggle', async ({ page }) => {
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-color-checked-in-item-focus-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-color-checked-in-item-focus-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..fc51ac7b706
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-color-checked-in-item-focus-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-color-checked-in-item-focus-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-color-checked-in-item-focus-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..e5c55ebc3ca
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-color-checked-in-item-focus-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-color-checked-in-item-focus-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-color-checked-in-item-focus-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..83caa41401a
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-color-checked-in-item-focus-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-color-checked-in-item-focus-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-color-checked-in-item-focus-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..092815e8974
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-color-checked-in-item-focus-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-color-checked-in-item-focus-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-color-checked-in-item-focus-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..ff8aaa150dd
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-color-checked-in-item-focus-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-color-checked-in-item-focus-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-color-checked-in-item-focus-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..7f87fd20447
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-color-checked-in-item-focus-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-clickable-item-focus-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-clickable-item-focus-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..416897ad19f
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-clickable-item-focus-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-clickable-item-focus-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-clickable-item-focus-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..d169f66fe58
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-clickable-item-focus-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-clickable-item-focus-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-clickable-item-focus-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..113825e84de
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-clickable-item-focus-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-clickable-item-focus-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-clickable-item-focus-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..d431fca3f0d
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-clickable-item-focus-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-clickable-item-focus-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-clickable-item-focus-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..80da04f99fc
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-clickable-item-focus-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-clickable-item-focus-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-clickable-item-focus-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..6fb39e31043
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-clickable-item-focus-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-item-focus-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-item-focus-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..e356b738007
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-item-focus-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-in-item-focus-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-item-focus-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-in-item-focus-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-item-focus-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-item-focus-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-item-focus-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..50bca49651c
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-item-focus-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-item-focus-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-item-focus-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..8e16c7a4b8f
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-item-focus-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-item-focus-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-item-focus-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..0743e8f1314
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-item-focus-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-item-focus-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-item-focus-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..84610944bd1
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-item-focus-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-multiple-in-item-focus-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-multiple-in-item-focus-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..9cac802f1b9
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-multiple-in-item-focus-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-multiple-in-item-focus-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-multiple-in-item-focus-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..07bfcfdf0ea
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-multiple-in-item-focus-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-multiple-in-item-focus-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-multiple-in-item-focus-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..7cd37793433
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-multiple-in-item-focus-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-multiple-in-item-focus-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-multiple-in-item-focus-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..1342c03b461
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-multiple-in-item-focus-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-multiple-in-item-focus-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-multiple-in-item-focus-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..78a2b693fcc
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-multiple-in-item-focus-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-multiple-in-item-focus-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-multiple-in-item-focus-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..ae4b62ff354
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-multiple-in-item-focus-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/toggle.ios.scss b/core/src/components/toggle/toggle.ios.scss
index cfe12f1d5b0..5f9a9cb6b15 100644
--- a/core/src/components/toggle/toggle.ios.scss
+++ b/core/src/components/toggle/toggle.ios.scss
@@ -171,3 +171,20 @@
 :host(.toggle-disabled) {
   opacity: $toggle-ios-disabled-opacity;
 }
+
+// iOS Toggle: Keyboard Focus
+// ----------------------------------------------------------
+// `toggle-defers-indicator` is excluded rather than overridden, because an
+// override would have to out-specify every rule below, including `.ion-color`.
+
+:host(.ion-focused:not(.toggle-defers-indicator)) .toggle-icon {
+  box-shadow: 0 0 0 4px $toggle-focus-ring-color-off;
+}
+
+:host(.ion-focused.toggle-checked:not(.toggle-defers-indicator)) .toggle-icon {
+  box-shadow: 0 0 0 4px $toggle-focus-ring-color;
+}
+
+:host(.ion-color.ion-focused.toggle-checked:not(.toggle-defers-indicator)) .toggle-icon {
+  box-shadow: 0 0 0 4px current-color(base, $toggle-focus-ring-color-alpha);
+}
diff --git a/core/src/components/toggle/toggle.md.scss b/core/src/components/toggle/toggle.md.scss
index d0a3bfda360..cd0b5582059 100644
--- a/core/src/components/toggle/toggle.md.scss
+++ b/core/src/components/toggle/toggle.md.scss
@@ -15,7 +15,8 @@
   --handle-width: #{$toggle-md-handle-width};
   --handle-height: #{$toggle-md-handle-height};
   --handle-max-height: #{$toggle-md-handle-max-height};
-  --handle-spacing: 0;
+  // A length, not a bare 0, so it composes in `calc()`.
+  --handle-spacing: 0px;
   --handle-transition: #{$toggle-md-transition};
 }
 
@@ -67,6 +68,69 @@
   height: 100%;
 }
 
+// Material Design Toggle: Keyboard Focus
+// ----------------------------------------------------------
+// The indicator is drawn on the wrapper because the handle uses
+// `contain: strict`, which would clip it. The wrapper travels with the handle.
+//
+// `toggle-defers-indicator` is excluded rather than overridden so the indicator
+// is never created, leaving the rules that position and color it nothing to act on.
+
+:host(.ion-focused:not(.toggle-defers-indicator)) .toggle-icon-wrapper::after {
+  @include border-radius(50%);
+
+  display: block;
+  position: absolute;
+
+  width: $toggle-md-focus-ring-size;
+  height: $toggle-md-focus-ring-size;
+
+  transform: translateY(-50%);
+
+  background: $toggle-focus-ring-color-off;
+
+  content: "";
+
+  // Drawn behind the handle so the translucent indicator does not tint it. The
+  // wrapper is its own stacking context, so it stays above the track.
+  z-index: -1;
+
+  inset-block-start: 50%;
+}
+
+// Positioned the same way as `.toggle-inner`, offset by half the size difference
+// so it centers on the handle. Anchored physically to mirror the handle, which
+// uses `left` in LTR and `right` in RTL.
+
+:host(.toggle-ltr.ion-focused) .toggle-icon-wrapper::after {
+  // stylelint-disable-next-line property-disallowed-list
+  left: calc(var(--handle-spacing) + (var(--handle-width) - #{$toggle-md-focus-ring-size}) / 2);
+}
+
+:host(.toggle-rtl.ion-focused) .toggle-icon-wrapper::after {
+  // stylelint-disable-next-line property-disallowed-list
+  right: calc(var(--handle-spacing) + (var(--handle-width) - #{$toggle-md-focus-ring-size}) / 2);
+}
+
+// Matches the checked shift `.toggle-inner` applies, so the indicator stays on
+// the handle. The Y component repeats the centering from the base rule.
+
+:host(.toggle-ltr.ion-focused.toggle-checked) .toggle-icon-wrapper::after {
+  transform: translate(calc(var(--handle-spacing) * -2), -50%);
+}
+
+:host(.toggle-rtl.ion-focused.toggle-checked) .toggle-icon-wrapper::after {
+  transform: translate(calc(var(--handle-spacing) * 2), -50%);
+}
+
+:host(.ion-focused.toggle-checked) .toggle-icon-wrapper::after {
+  background: $toggle-focus-ring-color;
+}
+
+:host(.ion-color.ion-focused.toggle-checked) .toggle-icon-wrapper::after {
+  background: current-color(base, $toggle-focus-ring-color-alpha);
+}
+
 // Material Design Toggle: Disabled
 // ----------------------------------------------------------
 // The toggle and label should use the
diff --git a/core/src/components/toggle/toggle.md.vars.scss b/core/src/components/toggle/toggle.md.vars.scss
index 63f9ef72c9a..b782131b8be 100644
--- a/core/src/components/toggle/toggle.md.vars.scss
+++ b/core/src/components/toggle/toggle.md.vars.scss
@@ -48,3 +48,5 @@ $toggle-md-on-off-label-color: #000;
 
 /// @prop - The text color of the on/off labels when the toggle is checked
 $toggle-md-on-off-label-checked-color: #fff;
+
+$toggle-md-focus-ring-size:                       36px;
diff --git a/core/src/components/toggle/toggle.scss b/core/src/components/toggle/toggle.scss
index b64107e66b0..1c239104656 100644
--- a/core/src/components/toggle/toggle.scss
+++ b/core/src/components/toggle/toggle.scss
@@ -1,4 +1,3 @@
-@import "../../themes/ionic.globals";
 @import "./toggle.vars.scss";
 
 // Toggle
@@ -59,10 +58,6 @@
   width: auto;
 }
 
-:host(.ion-focused) input {
-  border: 2px solid #5e9ed6;
-}
-
 :host(.toggle-disabled) {
   pointer-events: none;
 }
@@ -75,6 +70,11 @@ input {
   display: none;
 }
 
+// Hide the native focus ring since we draw our own focus indicator.
+:host(:focus) {
+  outline: none;
+}
+
 // Toggle Wrapper
 // --------------------------------------------------
 
diff --git a/core/src/components/toggle/toggle.tsx b/core/src/components/toggle/toggle.tsx
index b46635c8a78..041a200bead 100644
--- a/core/src/components/toggle/toggle.tsx
+++ b/core/src/components/toggle/toggle.tsx
@@ -1,6 +1,6 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Build, Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil/core';
-import { checkInvalidState } from '@utils/forms';
+import { Build, Component, Element, Event, Host, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
+import { checkInvalidState, createItemMultipleInputsObserver } from '@utils/forms';
 import { renderHiddenInput, inheritAriaAttributes } from '@utils/helpers';
 import type { Attributes } from '@utils/helpers';
 import { hapticSelection } from '@utils/native/haptic';
@@ -46,6 +46,7 @@ export class Toggle implements ComponentInterface {
   private toggleTrack?: HTMLElement;
   private didLoad = false;
   private validationObserver?: MutationObserver;
+  private itemFocusObserver?: MutationObserver;
 
   @Element() el!: HTMLIonToggleElement;
 
@@ -227,6 +228,11 @@ export class Toggle implements ComponentInterface {
 
     // Always set initial state
     this.isInvalid = checkInvalidState(el);
+
+    this.itemFocusObserver = createItemMultipleInputsObserver(el, () => forceUpdate(this), [
+      'item-multiple-inputs',
+      'ion-activatable',
+    ]);
   }
 
   componentDidLoad() {
@@ -258,6 +264,11 @@ export class Toggle implements ComponentInterface {
       this.gesture = undefined;
     }
 
+    if (this.itemFocusObserver) {
+      this.itemFocusObserver.disconnect();
+      this.itemFocusObserver = undefined;
+    }
+
     // Clean up validation observer to prevent memory leaks.
     if (this.validationObserver) {
       this.validationObserver.disconnect();
@@ -456,6 +467,12 @@ export class Toggle implements ComponentInterface {
     const mode = getIonMode(this);
     const value = this.getValue();
     const rtl = isRTL(el) ? 'rtl' : 'ltr';
+    const inItem = hostContext('ion-item', el);
+    const inMultipleInputsItem = hostContext('ion-item.item-multiple-inputs', el);
+    // A clickable item is a second tab stop painting the same row indicator, which
+    // `item-multiple-inputs` misses because it counts cover elements, not toggles.
+    // The attributes are matched too because the class needs the item to render.
+    const inClickableItem = hostContext('ion-item.ion-activatable, ion-item[button], ion-item[href]', el);
     renderHiddenInput(true, el, name, checked ? value : '', disabled);
 
     return (
@@ -475,7 +492,11 @@ export class Toggle implements ComponentInterface {
         onBlur={this.onBlur}
         class={createColorClasses(color, {
           [mode]: true,
-          'in-item': hostContext('ion-item', el),
+          'in-item': inItem,
+          // `ion-focusable` has to stay on because it is what makes the item focusable.
+          // When the item draws the row indicator, CSS suppresses ours instead.
+          'ion-focusable': true,
+          'toggle-defers-indicator': inItem && !inMultipleInputsItem && !inClickableItem,
           'toggle-activated': activated,
           'toggle-checked': checked,
           'toggle-disabled': disabled,
diff --git a/core/src/components/toggle/toggle.vars.scss b/core/src/components/toggle/toggle.vars.scss
index 4f0d34a764f..173de9c3684 100644
--- a/core/src/components/toggle/toggle.vars.scss
+++ b/core/src/components/toggle/toggle.vars.scss
@@ -1,5 +1,16 @@
+@import "../../themes/ionic.globals";
+
 /// @prop - Top margin of toggle's label when in an item
 $toggle-item-label-margin-top: 10px;
 
 /// @prop - Bottom margin of toggle's label when in an item
-$toggle-item-label-margin-bottom: 10px;
\ No newline at end of file
+$toggle-item-label-margin-bottom: 10px;
+
+/// @prop - Color of the focus indicator for the unchecked toggle
+$toggle-focus-ring-color-off: rgba(var(--ion-text-color-rgb, 0, 0, 0), .12);
+
+/// @prop - Alpha of the focus indicator for the checked toggle
+$toggle-focus-ring-color-alpha: .2;
+
+/// @prop - Color of the focus indicator for the checked toggle
+$toggle-focus-ring-color: ion-color(primary, base, $toggle-focus-ring-color-alpha);
diff --git a/core/src/utils/forms/index.ts b/core/src/utils/forms/index.ts
index 682811ed643..d54258b956b 100644
--- a/core/src/utils/forms/index.ts
+++ b/core/src/utils/forms/index.ts
@@ -1,3 +1,4 @@
 export * from './notch-controller';
 export * from './compare-with-utils';
+export * from './item-multiple-inputs';
 export * from './validity';
diff --git a/core/src/utils/forms/item-multiple-inputs.ts b/core/src/utils/forms/item-multiple-inputs.ts
new file mode 100644
index 00000000000..0678456ebf5
--- /dev/null
+++ b/core/src/utils/forms/item-multiple-inputs.ts
@@ -0,0 +1,42 @@
+import { Build } from '@stencil/core';
+
+/**
+ * `item-multiple-inputs` is toggled on the item after its form controls render,
+ * so a control whose focus styling depends on it needs to re-render when it flips.
+ *
+ * @internal
+ * @param el The form control whose closest `ion-item` should be observed.
+ * @param onChange Called whenever one of `classNames` is added or removed.
+ * @param classNames The item classes the caller's rendering depends on. A caller
+ * reading more than one must list them all, or changes to the rest are ignored.
+ * @returns The observer to disconnect in `disconnectedCallback`, or `undefined`
+ * if it could not be created.
+ */
+export const createItemMultipleInputsObserver = (
+  el: HTMLElement,
+  onChange: () => void,
+  classNames: string[] = ['item-multiple-inputs']
+): MutationObserver | undefined => {
+  const item = el.closest('ion-item');
+
+  if (!item || !Build.isBrowser || typeof MutationObserver === 'undefined') {
+    return undefined;
+  }
+
+  const readClasses = () => classNames.map((name) => item.classList.contains(name)).join(',');
+
+  let previousClasses = readClasses();
+
+  const observer = new MutationObserver(() => {
+    const currentClasses = readClasses();
+
+    if (currentClasses !== previousClasses) {
+      previousClasses = currentClasses;
+      onChange();
+    }
+  });
+
+  observer.observe(item, { attributes: true, attributeFilter: ['class'] });
+
+  return observer;
+};
diff --git a/core/src/utils/test/playwright/apply-keyboard-focus.ts b/core/src/utils/test/playwright/apply-keyboard-focus.ts
new file mode 100644
index 00000000000..c6103f27546
--- /dev/null
+++ b/core/src/utils/test/playwright/apply-keyboard-focus.ts
@@ -0,0 +1,26 @@
+import type { Locator } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+import type { E2EPage } from './playwright-declarations';
+
+/**
+ * Puts an element into the keyboard focus state that draws the focus indicator.
+ * Requires an `ion-app` so `startFocusVisible` is running. Its listeners attach
+ * asynchronously, so focus is retried until `ion-focused` sticks.
+ *
+ * `Shift` re-enables keyboard mode without moving focus, in case a pointer event
+ * earlier in the test turned it off. Focus moves programmatically because Firefox
+ * cannot move it back into the page once blurred, so an early Tab is unretryable.
+ *
+ * Pass `indicatorLocator` when something other than the focused element gets
+ * `ion-focused`. A checkbox or radio alone in an item has no `ion-focusable` class of
+ * its own because the item draws the indicator for it, so wait on the item.
+ */
+export const applyKeyboardFocus = async (page: E2EPage, locator: Locator, indicatorLocator: Locator = locator) => {
+  await expect(async () => {
+    await page.evaluate(() => (document.activeElement as HTMLElement | null)?.blur());
+    await page.keyboard.press('Shift');
+    await locator.focus();
+    await expect(indicatorLocator).toHaveClass(/ion-focused/, { timeout: 250 });
+  }).toPass({ timeout: 5000 });
+};
diff --git a/core/src/utils/test/playwright/index.ts b/core/src/utils/test/playwright/index.ts
index ce51b371266..777d35d4816 100644
--- a/core/src/utils/test/playwright/index.ts
+++ b/core/src/utils/test/playwright/index.ts
@@ -3,6 +3,7 @@ export * from './playwright-declarations';
 export * from './page/event-spy';
 export * from './page/utils';
 export * from './drag-element';
+export * from './apply-keyboard-focus';
 export * from './matchers';
 export * from './viewports';
 export * from './generator';