diff --git a/BREAKING.md b/BREAKING.md
index 8d90fe890b6..5325a4f369b 100644
--- a/BREAKING.md
+++ b/BREAKING.md
@@ -206,6 +206,8 @@ Developers using these components will need to migrate to using Swiper.js direct
 
 - `ionChange` is no longer emitted when the `checked` property of `ion-toggle` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking the toggle to set it on or off.
 
+- The `--background` and `--background-checked` variables have been renamed to `--track-background` and `--track-background-checked`, respectively.
+
 <h4 id="version-7x-virtual-scroll">Virtual Scroll</h4>
 
 `ion-virtual-scroll` has been removed from Ionic.
diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts
index 0ef736d407d..82878d701bf 100644
--- a/angular/src/directives/proxies.ts
+++ b/angular/src/directives/proxies.ts
@@ -2247,13 +2247,13 @@ when programmatically changing the value of the `checked` property.
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['checked', 'color', 'disabled', 'enableOnOffLabels', 'mode', 'name', 'value']
+  inputs: ['checked', 'color', 'disabled', 'enableOnOffLabels', 'justify', 'labelPlacement', 'mode', 'name', 'value']
 })
 @Component({
   selector: 'ion-toggle',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['checked', 'color', 'disabled', 'enableOnOffLabels', 'mode', 'name', 'value']
+  inputs: ['checked', 'color', 'disabled', 'enableOnOffLabels', 'justify', 'labelPlacement', 'mode', 'name', 'value']
 })
 export class IonToggle {
   protected el: HTMLElement;
diff --git a/core/api.txt b/core/api.txt
index a4ebbcf64b8..f9eacb5fe50 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -1428,14 +1428,14 @@ ion-toggle,prop,checked,boolean,false,false,false
 ion-toggle,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-toggle,prop,disabled,boolean,false,false,false
 ion-toggle,prop,enableOnOffLabels,boolean | undefined,undefined,false,false
+ion-toggle,prop,justify,"end" | "space-between" | "start",'space-between',false,false
+ion-toggle,prop,labelPlacement,"end" | "fixed" | "start",'start',false,false
 ion-toggle,prop,mode,"ios" | "md",undefined,false,false
 ion-toggle,prop,name,string,this.inputId,false,false
 ion-toggle,prop,value,null | string | undefined,'on',false,false
 ion-toggle,event,ionBlur,void,true
 ion-toggle,event,ionChange,ToggleChangeEventDetail<any>,true
 ion-toggle,event,ionFocus,void,true
-ion-toggle,css-prop,--background
-ion-toggle,css-prop,--background-checked
 ion-toggle,css-prop,--border-radius
 ion-toggle,css-prop,--handle-background
 ion-toggle,css-prop,--handle-background-checked
@@ -1446,6 +1446,8 @@ ion-toggle,css-prop,--handle-max-height
 ion-toggle,css-prop,--handle-spacing
 ion-toggle,css-prop,--handle-transition
 ion-toggle,css-prop,--handle-width
+ion-toggle,css-prop,--track-background
+ion-toggle,css-prop,--track-background-checked
 ion-toggle,part,handle
 ion-toggle,part,track
 
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 3e89865e62c..c5a7c93c103 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -2994,6 +2994,14 @@ export namespace Components {
           * Enables the on/off accessibility switch labels within the toggle.
          */
         "enableOnOffLabels": boolean | undefined;
+        /**
+          * How to pack the label and toggle within a line. `'start'`: The label and toggle will appear on the left in LTR and on the right in RTL. `'end'`: The label and toggle will appear on the right in LTR and on the left in RTL. `'space-between'`: The label and toggle will appear on opposite ends of the line with space between the two elements.
+         */
+        "justify": 'start' | 'end' | 'space-between';
+        /**
+          * Where to place the label relative to the input. `'start'`: The label will appear to the left of the toggle in LTR and to the right in RTL. `'end'`: The label will appear to the right of the toggle in LTR and to the left in RTL. `'fixed'`: The label has the same behavior as `'start'` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+         */
+        "labelPlacement": 'start' | 'end' | 'fixed';
         /**
           * The mode determines which platform styles to use.
          */
@@ -6990,6 +6998,14 @@ declare namespace LocalJSX {
           * Enables the on/off accessibility switch labels within the toggle.
          */
         "enableOnOffLabels"?: boolean | undefined;
+        /**
+          * How to pack the label and toggle within a line. `'start'`: The label and toggle will appear on the left in LTR and on the right in RTL. `'end'`: The label and toggle will appear on the right in LTR and on the left in RTL. `'space-between'`: The label and toggle will appear on opposite ends of the line with space between the two elements.
+         */
+        "justify"?: 'start' | 'end' | 'space-between';
+        /**
+          * Where to place the label relative to the input. `'start'`: The label will appear to the left of the toggle in LTR and to the right in RTL. `'end'`: The label will appear to the right of the toggle in LTR and to the left in RTL. `'fixed'`: The label has the same behavior as `'start'` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+         */
+        "labelPlacement"?: 'start' | 'end' | 'fixed';
         /**
           * The mode determines which platform styles to use.
          */
diff --git a/core/src/components/toggle/test/a11y/index.html b/core/src/components/toggle/test/a11y/index.html
new file mode 100644
index 00000000000..fae78b4ec22
--- /dev/null
+++ b/core/src/components/toggle/test/a11y/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Toggle - a11y</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+
+  <body>
+    <main>
+      <h1>Toggle - a11y</h1>
+
+      <ion-toggle>my label</ion-toggle><br />
+      <ion-toggle aria-label="my aria label"></ion-toggle><br />
+    </main>
+  </body>
+</html>
diff --git a/core/src/components/toggle/test/a11y/toggle.e2e.ts b/core/src/components/toggle/test/a11y/toggle.e2e.ts
new file mode 100644
index 00000000000..ef2fb9e8ee2
--- /dev/null
+++ b/core/src/components/toggle/test/a11y/toggle.e2e.ts
@@ -0,0 +1,17 @@
+import AxeBuilder from '@axe-core/playwright';
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('toggle: a11y', () => {
+  test.beforeEach(async ({ skip }) => {
+    skip.rtl();
+    skip.mode('md');
+  });
+
+  test('should not have accessibility violations', async ({ page }) => {
+    await page.goto(`/src/components/toggle/test/a11y`);
+
+    const results = await new AxeBuilder({ page }).analyze();
+    expect(results.violations).toEqual([]);
+  });
+});
diff --git a/core/src/components/toggle/test/basic/index.html b/core/src/components/toggle/test/basic/index.html
index e2a7eb260f1..64d09702329 100644
--- a/core/src/components/toggle/test/basic/index.html
+++ b/core/src/components/toggle/test/basic/index.html
@@ -20,124 +20,18 @@
         <ion-toolbar>
           <ion-title>Toggle - Basic</ion-title>
           <ion-buttons slot="primary">
-            <ion-toggle aria-label="Toggle"></ion-toggle>
+            <ion-toggle aria-label="Enable Notifications"></ion-toggle>
           </ion-buttons>
         </ion-toolbar>
       </ion-header>
 
-      <ion-content id="content">
-        <ion-list>
-          <ion-item>
-            <ion-label>Orange</ion-label>
-            <ion-toggle id="orange" slot="start" name="orange"></ion-toggle>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Apple</ion-label>
-            <ion-toggle slot="start" name="apple" checked></ion-toggle>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Banana</ion-label>
-            <ion-toggle slot="start" name="banana" checked class="toggle-part"></ion-toggle>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Cherry, disabled</ion-label>
-            <ion-toggle slot="start" color="danger" name="cherry" disabled></ion-toggle>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Grape, checked, disabled</ion-label>
-            <ion-toggle slot="start" id="grapeChecked" value="grape" name="grape" checked disabled></ion-toggle>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Kiwi, (ionChange) Secondary color</ion-label>
-            <ion-toggle slot="start" color="secondary" (ionChange)="kiwiChange($event)"></ion-toggle>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Strawberry, (ionChange) checked="true"</ion-label>
-            <ion-toggle slot="start" color="light" (ionChange)="strawberryChange($event)" checked="true"></ion-toggle>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Checkbox right, checked, really long text that should ellipsis</ion-label>
-            <ion-toggle slot="end" color="danger" checked></ion-toggle>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Checkbox right side</ion-label>
-            <ion-toggle slot="end" checked></ion-toggle>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Button w/ right side default icon, really long text that should ellipsis</ion-label>
-            <ion-icon name="information-circle" slot="end"></ion-icon>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Custom</ion-label>
-            <ion-toggle slot="start" style="--border-radius: 0px; --handle-border-radius: 0px" checked></ion-toggle>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Stop Immediate Event Propagation</ion-label>
-            <ion-toggle slot="start" checked id="eventPropagation"></ion-toggle>
-          </ion-item>
-        </ion-list>
-
-        <p aria-hidden="true" class="ion-text-center">
-          <ion-button onClick="toggleBoolean('grapeChecked', 'checked')" fill="outline" size="small"
-            >Grape Checked</ion-button
-          >
-          <ion-button onClick="toggleBoolean('grapeChecked', 'disabled')" fill="outline" size="small"
-            >Grape Disabled</ion-button
-          >
-          <ion-button onClick="printForm()" fill="outline" size="small">Print Form</ion-button>
-        </p>
-
-        <p>
-          <ion-toggle aria-label="Stand-alone toggle" id="standAloneChecked"></ion-toggle>
-          Stand-alone toggle:
-          <span id="standAloneCheckedSpan"></span>
-        </p>
+      <ion-content class="ion-padding">
+        <ion-toggle
+          >Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications
+          Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable
+          Notifications</ion-toggle
+        >
       </ion-content>
-
-      <style>
-        .toggle-part.toggle-checked::part(handle) {
-          background: red;
-        }
-
-        .toggle-part.toggle-checked::part(track) {
-          background: purple;
-        }
-
-        .toggle-part::part(handle) {
-          background: green;
-        }
-
-        .toggle-part::part(track) {
-          background: hotpink;
-        }
-      </style>
-
-      <script>
-        function printForm(ev) {}
-
-        function toggleBoolean(id, prop) {
-          var el = document.getElementById(id);
-
-          var isTrue = el[prop] ? false : true;
-          el[prop] = isTrue;
-        }
-
-        document.getElementById('eventPropagation').addEventListener('click', (evt) => {
-          evt.stopImmediatePropagation();
-          console.log('clicked');
-        });
-      </script>
     </ion-app>
   </body>
 </html>
diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts b/core/src/components/toggle/test/color/toggle.e2e.ts
new file mode 100644
index 00000000000..0a6a8104951
--- /dev/null
+++ b/core/src/components/toggle/test/color/toggle.e2e.ts
@@ -0,0 +1,25 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('toggle: color', () => {
+  test.beforeEach(({ skip }) => {
+    skip.rtl();
+  });
+  test('should apply color when checked', async ({ page }) => {
+    await page.setContent(`
+      <ion-toggle color="danger" checked="true">Label</ion-toggle>
+    `);
+
+    const toggle = page.locator('ion-toggle');
+    expect(await toggle.screenshot()).toMatchSnapshot(`toggle-color-checked-${page.getSnapshotSettings()}.png`);
+  });
+
+  test('should not apply color when unchecked', async ({ page }) => {
+    await page.setContent(`
+      <ion-toggle color="danger">Label</ion-toggle>
+    `);
+
+    const toggle = page.locator('ion-toggle');
+    expect(await toggle.screenshot()).toMatchSnapshot(`toggle-color-unchecked-${page.getSnapshotSettings()}.png`);
+  });
+});
diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-checked-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-checked-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..d7732da3a3b
Binary files /dev/null and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-checked-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-checked-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-checked-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..c8d6a37f91c
Binary files /dev/null and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-checked-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-checked-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-checked-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..fbc7f769068
Binary files /dev/null and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-checked-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-checked-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-checked-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..372186ea5de
Binary files /dev/null and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-checked-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-checked-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-checked-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..b9365baf6d7
Binary files /dev/null and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-checked-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-checked-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-checked-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..2e0b785a033
Binary files /dev/null and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-checked-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-unchecked-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-unchecked-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..620d15ff4d2
Binary files /dev/null and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-unchecked-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-unchecked-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-unchecked-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..4828fb41c5a
Binary files /dev/null and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-unchecked-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-unchecked-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-unchecked-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..e3b3f9f3198
Binary files /dev/null and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-unchecked-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-unchecked-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-unchecked-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..f31d0d8fac6
Binary files /dev/null and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-unchecked-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-unchecked-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-unchecked-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..89a94bc0fa2
Binary files /dev/null and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-unchecked-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-unchecked-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-unchecked-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..2cf05912991
Binary files /dev/null and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-unchecked-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/index.html b/core/src/components/toggle/test/enable-on-off-labels/index.html
index 9b9a48c9670..88ff925da92 100644
--- a/core/src/components/toggle/test/enable-on-off-labels/index.html
+++ b/core/src/components/toggle/test/enable-on-off-labels/index.html
@@ -188,83 +188,67 @@
       <ion-content>
         <ion-list>
           <ion-item>
-            <ion-label>Unchecked</ion-label>
-            <ion-toggle slot="end" enable-on-off-labels="true"></ion-toggle>
+            <ion-toggle slot="end" enable-on-off-labels="true">Unchecked</ion-toggle>
           </ion-item>
 
           <ion-item>
-            <ion-label>Checked</ion-label>
-            <ion-toggle slot="end" enable-on-off-labels="true" checked></ion-toggle>
+            <ion-toggle slot="end" enable-on-off-labels="true" checked>Checked</ion-toggle>
           </ion-item>
 
           <ion-item>
-            <ion-label>Secondary Unchecked</ion-label>
-            <ion-toggle slot="end" color="secondary" enable-on-off-labels="true"></ion-toggle>
+            <ion-toggle slot="end" color="secondary" enable-on-off-labels="true">Secondary Unchecked</ion-toggle>
           </ion-item>
 
           <ion-item>
-            <ion-label>Secondary Checked</ion-label>
-            <ion-toggle slot="end" color="secondary" enable-on-off-labels="true" checked></ion-toggle>
+            <ion-toggle slot="end" color="secondary" enable-on-off-labels="true" checked>Secondary Checked</ion-toggle>
           </ion-item>
 
           <ion-item>
-            <ion-label>Success Unchecked</ion-label>
-            <ion-toggle slot="end" color="success" enable-on-off-labels="true"></ion-toggle>
+            <ion-toggle slot="end" color="success" enable-on-off-labels="true">Success Unchecked</ion-toggle>
           </ion-item>
 
           <ion-item>
-            <ion-label>Success Checked</ion-label>
-            <ion-toggle slot="end" color="success" enable-on-off-labels="true" checked></ion-toggle>
+            <ion-toggle slot="end" color="success" enable-on-off-labels="true" checked>Success Checked</ion-toggle>
           </ion-item>
 
           <ion-item>
-            <ion-label>Danger Unchecked</ion-label>
-            <ion-toggle slot="end" color="danger" enable-on-off-labels="true"></ion-toggle>
+            <ion-toggle slot="end" color="danger" enable-on-off-labels="true">Danger Unchecked</ion-toggle>
           </ion-item>
 
           <ion-item>
-            <ion-label>Danger Checked</ion-label>
-            <ion-toggle slot="end" color="danger" enable-on-off-labels="true" checked></ion-toggle>
+            <ion-toggle slot="end" color="danger" enable-on-off-labels="true" checked>Danger Checked</ion-toggle>
           </ion-item>
 
           <ion-item>
-            <ion-label>Tertiary Unchecked</ion-label>
-            <ion-toggle slot="end" color="tertiary" enable-on-off-labels="true"></ion-toggle>
+            <ion-toggle slot="end" color="tertiary" enable-on-off-labels="true">Tertiary Unchecked</ion-toggle>
           </ion-item>
 
           <ion-item>
-            <ion-label>Tertiary Checked</ion-label>
-            <ion-toggle slot="end" color="tertiary" enable-on-off-labels="true" checked></ion-toggle>
+            <ion-toggle slot="end" color="tertiary" enable-on-off-labels="true" checked>Tertiary Checked</ion-toggle>
           </ion-item>
 
           <ion-item>
-            <ion-label>Light Unchecked</ion-label>
-            <ion-toggle slot="end" color="light" enable-on-off-labels="true"></ion-toggle>
+            <ion-toggle slot="end" color="light" enable-on-off-labels="true">Light Unchecked</ion-toggle>
           </ion-item>
 
           <ion-item>
-            <ion-label>Light Checked</ion-label>
-            <ion-toggle slot="end" color="light" enable-on-off-labels="true" checked></ion-toggle>
+            <ion-toggle slot="end" color="light" enable-on-off-labels="true" checked>Light Checked</ion-toggle>
           </ion-item>
 
           <ion-item>
-            <ion-label>Medium Unchecked</ion-label>
-            <ion-toggle slot="end" color="medium" enable-on-off-labels="true"></ion-toggle>
+            <ion-toggle slot="end" color="medium" enable-on-off-labels="true">Medium Unchecked</ion-toggle>
           </ion-item>
 
           <ion-item>
-            <ion-label>Medium Checked</ion-label>
-            <ion-toggle slot="end" color="medium" enable-on-off-labels="true" checked></ion-toggle>
+            <ion-toggle slot="end" color="medium" enable-on-off-labels="true" checked>Medium Checked</ion-toggle>
           </ion-item>
 
           <ion-item>
-            <ion-label>Dark Unchecked</ion-label>
-            <ion-toggle slot="end" color="dark" enable-on-off-labels="true"></ion-toggle>
+            <ion-toggle slot="end" color="dark" enable-on-off-labels="true">Dark Unchecked</ion-toggle>
           </ion-item>
 
           <ion-item>
-            <ion-label>Dark Checked</ion-label>
-            <ion-toggle slot="end" color="dark" enable-on-off-labels="true" checked></ion-toggle>
+            <ion-toggle slot="end" color="dark" enable-on-off-labels="true" checked>Dark Checked</ion-toggle>
           </ion-item>
         </ion-list>
       </ion-content>
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-ltr-Mobile-Chrome-linux.png
index 2ca9afb64fc..b58f60c8f57 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-ltr-Mobile-Firefox-linux.png
index 2019d85c49f..0ca488c22ae 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-ltr-Mobile-Safari-linux.png
index 838f1de7eb4..64805ef5811 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-rtl-Mobile-Chrome-linux.png
index 31fa98c0e4d..3a87263e096 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-rtl-Mobile-Firefox-linux.png
index be7d881cfc7..c1c0ab2cc4d 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-rtl-Mobile-Safari-linux.png
index 41a665fcc8b..28db32badcb 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-ltr-Mobile-Chrome-linux.png
index d5e6ea87df6..73e16d4b35d 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-ltr-Mobile-Firefox-linux.png
index dca4650ce3e..1356ece915a 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-ltr-Mobile-Safari-linux.png
index 2b6c1698fde..8a1e4bbec07 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-rtl-Mobile-Chrome-linux.png
index 366f07b7cae..8ba704fd7ab 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-rtl-Mobile-Firefox-linux.png
index ecb7dd85c04..d5334b169a2 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-rtl-Mobile-Safari-linux.png
index b8b8867d540..bc5aa826ac6 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-ltr-Mobile-Chrome-linux.png
index 293c628b8c6..0cff6572373 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-ltr-Mobile-Firefox-linux.png
index 4f07381af8b..bdc948d436d 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-ltr-Mobile-Safari-linux.png
index 04a53e9887d..85258c1be05 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Chrome-linux.png
index 50a4ad99a5f..71bc485b75d 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Firefox-linux.png
index 828cd6342b1..20473ac40b7 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Safari-linux.png
index 9e3297934b7..12eb55bb3b7 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Chrome-linux.png
index 401384a0913..bbc39f1f6fc 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Firefox-linux.png
index a3a3cde9259..cd92503e762 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Safari-linux.png
index f9080c11d06..4fe9a7236b1 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Chrome-linux.png
index 915b73f4c57..75886585954 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Firefox-linux.png
index 35d6f569d23..d16b2dc3aa0 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Safari-linux.png
index 280173c5984..211885036e4 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-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
new file mode 100644
index 00000000000..a6defb1771c
--- /dev/null
+++ b/core/src/components/toggle/test/item/index.html
@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Toggle - Item</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(250px, 1fr));
+        grid-row-gap: 20px;
+        grid-column-gap: 20px;
+      }
+      h2 {
+        font-size: 12px;
+        font-weight: normal;
+
+        color: #6f7378;
+
+        margin-top: 10px;
+      }
+      @media screen and (max-width: 800px) {
+        .grid {
+          grid-template-columns: 1fr;
+          padding: 0;
+        }
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Toggle - Item</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content" class="ion-padding">
+        <h1>Placement Start</h1>
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Justify Start</h2>
+            <ion-list>
+              <ion-item>
+                <ion-toggle label-placement="start" justify="start">Enable Notifications</ion-toggle>
+              </ion-item>
+            </ion-list>
+          </div>
+
+          <div class="grid-item">
+            <h2>Justify End</h2>
+            <ion-list>
+              <ion-item>
+                <ion-toggle label-placement="start" justify="end">Enable Notifications</ion-toggle>
+              </ion-item>
+            </ion-list>
+          </div>
+
+          <div class="grid-item">
+            <h2>Justify Space Between</h2>
+            <ion-list>
+              <ion-item>
+                <ion-toggle label-placement="start" justify="space-between">Enable Notifications</ion-toggle>
+              </ion-item>
+            </ion-list>
+          </div>
+        </div>
+
+        <h1>Placement End</h1>
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Justify Start</h2>
+            <ion-list>
+              <ion-item>
+                <ion-toggle label-placement="end" justify="start">Enable Notifications</ion-toggle>
+              </ion-item>
+            </ion-list>
+          </div>
+
+          <div class="grid-item">
+            <h2>Justify End</h2>
+            <ion-list>
+              <ion-item>
+                <ion-toggle label-placement="end" justify="end">Enable Notifications</ion-toggle>
+              </ion-item>
+            </ion-list>
+          </div>
+
+          <div class="grid-item">
+            <h2>Justify Space Between</h2>
+            <ion-list>
+              <ion-item>
+                <ion-toggle label-placement="end" justify="space-between">Enable Notifications</ion-toggle>
+              </ion-item>
+            </ion-list>
+          </div>
+        </div>
+
+        <h1>Placement Fixed</h1>
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Justify Start</h2>
+            <ion-list>
+              <ion-item>
+                <ion-toggle label-placement="fixed" justify="start">Enable Notifications</ion-toggle>
+              </ion-item>
+            </ion-list>
+          </div>
+
+          <div class="grid-item">
+            <h2>Justify End</h2>
+            <ion-list>
+              <ion-item>
+                <ion-toggle label-placement="fixed" justify="end">Enable Notifications</ion-toggle>
+              </ion-item>
+            </ion-list>
+          </div>
+
+          <div class="grid-item">
+            <h2>Justify Space Between</h2>
+            <ion-list>
+              <ion-item>
+                <ion-toggle label-placement="fixed" justify="space-between">Enable Notifications</ion-toggle>
+              </ion-item>
+            </ion-list>
+          </div>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/core/src/components/toggle/test/item/label.e2e.ts b/core/src/components/toggle/test/item/label.e2e.ts
new file mode 100644
index 00000000000..0b08e8d5d2d
--- /dev/null
+++ b/core/src/components/toggle/test/item/label.e2e.ts
@@ -0,0 +1,37 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('toggle: item', () => {
+  test('should render correctly in list', async ({ page }) => {
+    await page.setContent(`
+      <ion-list>
+        <ion-item>
+          <ion-toggle>Enable Notifications</ion-toggle>
+        </ion-item>
+      </ion-list>
+    `);
+    const list = page.locator('ion-list');
+    expect(await list.screenshot()).toMatchSnapshot(`toggle-list-${page.getSnapshotSettings()}.png`);
+  });
+  test('should render correctly in inset list', async ({ page }) => {
+    await page.setContent(`
+      <ion-list inset="true">
+        <ion-item>
+          <ion-toggle>Enable Notifications</ion-toggle>
+        </ion-item>
+      </ion-list>
+    `);
+    const list = page.locator('ion-list');
+    expect(await list.screenshot()).toMatchSnapshot(`toggle-inset-list-${page.getSnapshotSettings()}.png`);
+  });
+  test('label should have correct contrast when used in an item', async ({ page, skip }) => {
+    skip.rtl();
+    await page.setContent(`
+      <ion-item color="primary">
+        <ion-toggle>Enable Notifications</ion-toggle>
+      </ion-item>
+    `);
+    const item = page.locator('ion-item');
+    expect(await item.screenshot()).toMatchSnapshot(`toggle-item-color-${page.getSnapshotSettings()}.png`);
+  });
+});
diff --git a/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-inset-list-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-inset-list-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..d59e72ab8f7
Binary files /dev/null and b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-inset-list-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-inset-list-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-inset-list-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..dc85b459da3
Binary files /dev/null and b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-inset-list-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-inset-list-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-inset-list-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..d7f79519591
Binary files /dev/null and b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-inset-list-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-inset-list-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-inset-list-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..977459404c5
Binary files /dev/null and b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-inset-list-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-inset-list-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-inset-list-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..59cf51ebd28
Binary files /dev/null and b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-inset-list-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-inset-list-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-inset-list-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..a01b97431d3
Binary files /dev/null and b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-inset-list-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-inset-list-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-inset-list-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..ec4a3500f3e
Binary files /dev/null and b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-inset-list-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-inset-list-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-inset-list-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..5827c048d7a
Binary files /dev/null and b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-inset-list-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-inset-list-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-inset-list-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..cedfa013188
Binary files /dev/null and b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-inset-list-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-inset-list-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-inset-list-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..c69b09e9e38
Binary files /dev/null and b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-inset-list-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-inset-list-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-inset-list-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..f320bb0d7b9
Binary files /dev/null and b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-inset-list-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-inset-list-md-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-inset-list-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..f558bd9d6dd
Binary files /dev/null and b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-inset-list-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-item-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-item-color-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..b745edd785b
Binary files /dev/null and b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-item-color-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-item-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-item-color-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..45233cb09ab
Binary files /dev/null and b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-item-color-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-item-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-item-color-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..22a314a2eb6
Binary files /dev/null and b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-item-color-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-item-color-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-item-color-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..7baecf2634c
Binary files /dev/null and b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-item-color-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-item-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-item-color-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..bffb3698658
Binary files /dev/null and b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-item-color-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-item-color-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-item-color-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..8d4e00f56cc
Binary files /dev/null and b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-item-color-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-list-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-list-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..17f936fc2ed
Binary files /dev/null and b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-list-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-list-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-list-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..4ec23b79a60
Binary files /dev/null and b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-list-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-list-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-list-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..f885b8477bd
Binary files /dev/null and b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-list-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-list-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-list-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..11245be85ef
Binary files /dev/null and b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-list-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-list-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-list-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..2b686499e0f
Binary files /dev/null and b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-list-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-list-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-list-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..d87e43a26d3
Binary files /dev/null and b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-list-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-list-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-list-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..4dd5e83c58e
Binary files /dev/null and b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-list-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-list-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-list-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..952fbe8f1a7
Binary files /dev/null and b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-list-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-list-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-list-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..3b73701dc76
Binary files /dev/null and b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-list-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-list-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-list-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..1196f393c61
Binary files /dev/null and b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-list-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-list-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-list-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..2268ed5810f
Binary files /dev/null and b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-list-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-list-md-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-list-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..52525b14f13
Binary files /dev/null and b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-list-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/label/index.html b/core/src/components/toggle/test/label/index.html
new file mode 100644
index 00000000000..d7797fc9f71
--- /dev/null
+++ b/core/src/components/toggle/test/label/index.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Toggle - Label</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(250px, 1fr));
+        grid-row-gap: 20px;
+        grid-column-gap: 20px;
+      }
+      h2 {
+        font-size: 12px;
+        font-weight: normal;
+
+        color: #6f7378;
+
+        margin-top: 10px;
+      }
+      @media screen and (max-width: 800px) {
+        .grid {
+          grid-template-columns: 1fr;
+          padding: 0;
+        }
+      }
+
+      ion-toggle {
+        width: 100%;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Toggle - Label</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content" class="ion-padding">
+        <h1>Placement Start</h1>
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Justify Start</h2>
+            <ion-toggle label-placement="start" justify="start">Enable Notifications</ion-toggle>
+          </div>
+
+          <div class="grid-item">
+            <h2>Justify End</h2>
+            <ion-toggle label-placement="start" justify="end">Enable Notifications</ion-toggle>
+          </div>
+
+          <div class="grid-item">
+            <h2>Justify Space Between</h2>
+            <ion-toggle label-placement="start" justify="space-between">Enable Notifications</ion-toggle>
+          </div>
+        </div>
+
+        <h1>Placement End</h1>
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Justify Start</h2>
+            <ion-toggle label-placement="end" justify="start">Enable Notifications</ion-toggle>
+          </div>
+
+          <div class="grid-item">
+            <h2>Justify End</h2>
+            <ion-toggle label-placement="end" justify="end">Enable Notifications</ion-toggle>
+          </div>
+
+          <div class="grid-item">
+            <h2>Justify Space Between</h2>
+            <ion-toggle label-placement="end" justify="space-between">Enable Notifications</ion-toggle>
+          </div>
+        </div>
+
+        <h1>Placement Fixed</h1>
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Justify Start</h2>
+            <ion-toggle label-placement="fixed" justify="start">Enable Notifications</ion-toggle>
+          </div>
+
+          <div class="grid-item">
+            <h2>Justify End</h2>
+            <ion-toggle label-placement="fixed" justify="end">Enable Notifications</ion-toggle>
+          </div>
+
+          <div class="grid-item">
+            <h2>Justify Space Between</h2>
+            <ion-toggle label-placement="fixed" justify="space-between">Enable Notifications</ion-toggle>
+          </div>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts b/core/src/components/toggle/test/label/toggle.e2e.ts
new file mode 100644
index 00000000000..2d9eddf2ec2
--- /dev/null
+++ b/core/src/components/toggle/test/label/toggle.e2e.ts
@@ -0,0 +1,120 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+/**
+ * By default ion-toggle only takes up
+ * as much space as it needs. Justification is
+ * used for when the toggle takes up the full
+ * line (such as in an ion-item). As a result,
+ * we set the width of the toggle so we can
+ * see the justification results.
+ */
+test.describe('toggle: label', () => {
+  test.describe('toggle: start placement', () => {
+    test('should render a start justification with label in the start position', async ({ page }) => {
+      await page.setContent(`
+
+        <ion-toggle label-placement="start" justify="start" style="width: 200px">Label</ion-toggle>
+      `);
+
+      const toggle = page.locator('ion-toggle');
+      expect(await toggle.screenshot()).toMatchSnapshot(
+        `toggle-label-start-justify-start-${page.getSnapshotSettings()}.png`
+      );
+    });
+    test('should render an end justification with label in the start position', async ({ page }) => {
+      await page.setContent(`
+
+        <ion-toggle label-placement="start" justify="end" style="width: 200px">Label</ion-toggle>
+      `);
+
+      const toggle = page.locator('ion-toggle');
+      expect(await toggle.screenshot()).toMatchSnapshot(
+        `toggle-label-start-justify-end-${page.getSnapshotSettings()}.png`
+      );
+    });
+    test('should render a space between justification with label in the start position', async ({ page }) => {
+      await page.setContent(`
+
+        <ion-toggle label-placement="start" justify="space-between" style="width: 200px">Label</ion-toggle>
+      `);
+
+      const toggle = page.locator('ion-toggle');
+      expect(await toggle.screenshot()).toMatchSnapshot(
+        `toggle-label-start-justify-space-between-${page.getSnapshotSettings()}.png`
+      );
+    });
+  });
+
+  test.describe('toggle: end placement', () => {
+    test('should render a start justification with label in the end position', async ({ page }) => {
+      await page.setContent(`
+
+        <ion-toggle label-placement="end" justify="start" style="width: 200px">Label</ion-toggle>
+      `);
+
+      const toggle = page.locator('ion-toggle');
+      expect(await toggle.screenshot()).toMatchSnapshot(
+        `toggle-label-end-justify-start-${page.getSnapshotSettings()}.png`
+      );
+    });
+    test('should render an end justification with label in the end position', async ({ page }) => {
+      await page.setContent(`
+
+        <ion-toggle label-placement="end" justify="end" style="width: 200px">Label</ion-toggle>
+      `);
+
+      const toggle = page.locator('ion-toggle');
+      expect(await toggle.screenshot()).toMatchSnapshot(
+        `toggle-label-end-justify-end-${page.getSnapshotSettings()}.png`
+      );
+    });
+    test('should render a space between justification with label in the end position', async ({ page }) => {
+      await page.setContent(`
+
+        <ion-toggle label-placement="end" justify="space-between" style="width: 200px">Label</ion-toggle>
+      `);
+
+      const toggle = page.locator('ion-toggle');
+      expect(await toggle.screenshot()).toMatchSnapshot(
+        `toggle-label-end-justify-space-between-${page.getSnapshotSettings()}.png`
+      );
+    });
+  });
+
+  test.describe('toggle: fixed placement', () => {
+    test('should render a start justification with label in the fixed position', async ({ page }) => {
+      await page.setContent(`
+
+        <ion-toggle label-placement="fixed" justify="start" style="width: 200px">This is a long label</ion-toggle>
+      `);
+
+      const toggle = page.locator('ion-toggle');
+      expect(await toggle.screenshot()).toMatchSnapshot(
+        `toggle-label-fixed-justify-start-${page.getSnapshotSettings()}.png`
+      );
+    });
+    test('should render an end justification with label in the fixed position', async ({ page }) => {
+      await page.setContent(`
+
+        <ion-toggle label-placement="fixed" justify="end" style="width: 200px">This is a long label</ion-toggle>
+      `);
+
+      const toggle = page.locator('ion-toggle');
+      expect(await toggle.screenshot()).toMatchSnapshot(
+        `toggle-label-fixed-justify-end-${page.getSnapshotSettings()}.png`
+      );
+    });
+    test('should render a space between justification with label in the fixed position', async ({ page }) => {
+      await page.setContent(`
+
+        <ion-toggle label-placement="fixed" justify="space-between" style="width: 200px">This is a long label</ion-toggle>
+      `);
+
+      const toggle = page.locator('ion-toggle');
+      expect(await toggle.screenshot()).toMatchSnapshot(
+        `toggle-label-fixed-justify-space-between-${page.getSnapshotSettings()}.png`
+      );
+    });
+  });
+});
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-end-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-end-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..73a7f68569a
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-end-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-end-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-end-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..33ef8c21be9
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-end-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-end-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-end-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..b3c019dcfad
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-end-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-end-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-end-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..7ff310b377b
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-end-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-end-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-end-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..559b2aaa52f
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-end-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-end-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-end-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..c7086fd19b9
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-end-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-end-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-end-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..79fbfbdff9b
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-end-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-end-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-end-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..7fbdc8e5ee8
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-end-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-end-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-end-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..d131d630300
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-end-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-end-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-end-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..097ea22430e
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-end-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-end-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-end-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..280b989f70c
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-end-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-end-md-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-end-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..9c20e12574f
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-end-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-space-between-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-space-between-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..48fcecdb5b4
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-space-between-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-space-between-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-space-between-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..6b841fee4e9
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-space-between-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-space-between-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-space-between-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..e9e2f56cb89
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-space-between-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-space-between-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-space-between-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..399786b1b6c
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-space-between-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-space-between-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-space-between-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..7958611559e
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-space-between-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-space-between-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-space-between-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..11486bf0d8d
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-space-between-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-space-between-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-space-between-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..d7d01e90802
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-space-between-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-space-between-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-space-between-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..d8cbfa55b55
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-space-between-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-space-between-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-space-between-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..43407727c06
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-space-between-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-space-between-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-space-between-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..d7e6bbf0176
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-space-between-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-space-between-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-space-between-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..67db29d6170
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-space-between-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-space-between-md-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-space-between-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..d53d8ddb325
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-space-between-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-start-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-start-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..e5b1981d557
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-start-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-start-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-start-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..ebb93180d24
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-start-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-start-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-start-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..c96d2085522
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-start-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-start-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-start-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..d6d192a9c4e
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-start-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-start-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-start-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..2c0b4b37163
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-start-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-start-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-start-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..4a830c0005f
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-start-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-start-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-start-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..f0d78e8ccee
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-start-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-start-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-start-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..a6430b2b1f8
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-start-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-start-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-start-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..354467c580a
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-start-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-start-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-start-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..7053b0569ec
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-start-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-start-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-start-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..19a0b6027fb
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-start-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-start-md-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-start-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..2eb8a7646a7
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-end-justify-start-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-end-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-end-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..c66656b575d
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-end-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-end-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-end-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..1226b822b16
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-end-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-end-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-end-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..10b37cc6666
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-end-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-end-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-end-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..893a23048da
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-end-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-end-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-end-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..80a32ee2fe3
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-end-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-end-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-end-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..0b480891608
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-end-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-end-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-end-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..04375e1cb80
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-end-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-end-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-end-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..8c33461b026
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-end-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-end-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-end-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..f0d4ef43391
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-end-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-end-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-end-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..2d8f1fb7e5d
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-end-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-end-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-end-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..3b8fe50dd8b
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-end-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-end-md-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-end-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..6215155337b
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-end-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-space-between-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-space-between-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..26a9cf6be69
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-space-between-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-space-between-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-space-between-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..80704ea7dc7
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-space-between-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-space-between-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-space-between-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..00dc2d97b68
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-space-between-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-space-between-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-space-between-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..b0409aa7d5a
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-space-between-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-space-between-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-space-between-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..863fcdd8f29
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-space-between-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-space-between-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-space-between-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..04985a515bd
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-space-between-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-space-between-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-space-between-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..fcea62c76a8
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-space-between-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-space-between-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-space-between-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..63fd42d14f9
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-space-between-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-space-between-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-space-between-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..915866cdbf1
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-space-between-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-space-between-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-space-between-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..2d1cfc59e62
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-space-between-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-space-between-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-space-between-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..dabd6d175bc
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-space-between-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-space-between-md-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-space-between-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..54d53208d6c
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-space-between-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-start-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-start-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..bd4ca5461ea
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-start-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-start-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-start-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..2086746a654
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-start-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-start-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-start-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..72262acaf6d
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-start-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-start-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-start-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..a2352f897f5
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-start-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-start-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-start-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..5b436c0b386
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-start-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-start-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-start-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..e8e4d641ad0
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-start-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-start-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-start-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..466f3265039
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-start-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-start-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-start-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..d2f590c76bb
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-start-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-start-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-start-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..24fcf175efa
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-start-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-start-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-start-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..13eb081ea21
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-start-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-start-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-start-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..4058bc914d2
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-start-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-start-md-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-start-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..c54d55951cf
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-start-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-end-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-end-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..705fced89ac
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-end-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-end-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-end-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..6d1617804ba
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-end-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-end-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-end-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..e5357b621c6
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-end-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-end-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-end-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..cb4874dea93
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-end-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-end-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-end-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..52d6f789ef8
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-end-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-end-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-end-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..2941604aaec
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-end-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-end-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-end-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..7f1882b9a52
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-end-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-end-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-end-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..27501de891d
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-end-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-end-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-end-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..21b7a7e112c
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-end-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-end-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-end-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..fd242ab8f07
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-end-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-end-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-end-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..5be17bb70e8
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-end-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-end-md-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-end-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..69dca968d78
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-end-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-space-between-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-space-between-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..cca99d9f810
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-space-between-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-space-between-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-space-between-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..f4d5e2c6c0f
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-space-between-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-space-between-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-space-between-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..09ebb486c38
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-space-between-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-space-between-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-space-between-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..07ad7ce516c
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-space-between-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-space-between-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-space-between-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..ae5c5ddcd5a
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-space-between-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-space-between-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-space-between-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..2e4770ff48f
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-space-between-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-space-between-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-space-between-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..3fbdf35b487
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-space-between-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-space-between-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-space-between-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..9911dfef2ae
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-space-between-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-space-between-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-space-between-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..50d3fe739be
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-space-between-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-space-between-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-space-between-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..7b13591fb07
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-space-between-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-space-between-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-space-between-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..64667a4f1f9
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-space-between-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-space-between-md-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-space-between-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..e5c3211c945
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-space-between-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-start-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-start-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..d169615d07f
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-start-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-start-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-start-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..cfba6727133
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-start-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-start-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-start-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..fc5b1b07367
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-start-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-start-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-start-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..b4a7ed80a34
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-start-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-start-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-start-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..8c251b12dca
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-start-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-start-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-start-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..368fb664e58
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-start-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-start-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-start-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..d1a31540116
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-start-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-start-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-start-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..2f75f3a6771
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-start-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-start-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-start-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..f3cc4747955
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-start-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-start-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-start-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..4935ef8c802
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-start-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-start-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-start-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..588b59796b0
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-start-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-start-md-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-start-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..00db3f19bfa
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-start-justify-start-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/basic/index.html b/core/src/components/toggle/test/legacy/basic/index.html
new file mode 100644
index 00000000000..e332e2ddfdd
--- /dev/null
+++ b/core/src/components/toggle/test/legacy/basic/index.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Toggle - Basic</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Toggle - Basic</ion-title>
+          <ion-buttons slot="primary">
+            <ion-toggle></ion-toggle>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content">
+        <ion-list>
+          <ion-item>
+            <ion-label>Orange</ion-label>
+            <ion-toggle id="orange" slot="start" name="orange"></ion-toggle>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Apple</ion-label>
+            <ion-toggle slot="start" name="apple" checked></ion-toggle>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Banana</ion-label>
+            <ion-toggle slot="start" name="banana" checked class="toggle-part"></ion-toggle>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Cherry, disabled</ion-label>
+            <ion-toggle slot="start" color="danger" name="cherry" disabled></ion-toggle>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Grape, checked, disabled</ion-label>
+            <ion-toggle slot="start" id="grapeChecked" value="grape" name="grape" checked disabled></ion-toggle>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Kiwi, (ionChange) Secondary color</ion-label>
+            <ion-toggle slot="start" color="secondary" (ionChange)="kiwiChange($event)"></ion-toggle>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Strawberry, (ionChange) checked="true"</ion-label>
+            <ion-toggle slot="start" color="light" (ionChange)="strawberryChange($event)" checked="true"></ion-toggle>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Checkbox right, checked, really long text that should ellipsis</ion-label>
+            <ion-toggle slot="end" color="danger" checked></ion-toggle>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Checkbox right side</ion-label>
+            <ion-toggle slot="end" checked></ion-toggle>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Button w/ right side default icon, really long text that should ellipsis</ion-label>
+            <ion-icon name="information-circle" slot="end"></ion-icon>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Custom</ion-label>
+            <ion-toggle slot="start" style="--border-radius: 0px; --handle-border-radius: 0px" checked></ion-toggle>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Stop Immediate Event Propagation</ion-label>
+            <ion-toggle slot="start" checked id="eventPropagation"></ion-toggle>
+          </ion-item>
+        </ion-list>
+
+        <p aria-hidden="true" class="ion-text-center">
+          <ion-button onClick="toggleBoolean('grapeChecked', 'checked')" fill="outline" size="small"
+            >Grape Checked</ion-button
+          >
+          <ion-button onClick="toggleBoolean('grapeChecked', 'disabled')" fill="outline" size="small"
+            >Grape Disabled</ion-button
+          >
+          <ion-button onClick="printForm()" fill="outline" size="small">Print Form</ion-button>
+        </p>
+
+        <p>
+          <ion-toggle id="standAloneChecked"></ion-toggle>
+          Stand-alone toggle:
+          <span id="standAloneCheckedSpan"></span>
+        </p>
+      </ion-content>
+
+      <style>
+        .toggle-part.toggle-checked::part(handle) {
+          background: red;
+        }
+
+        .toggle-part.toggle-checked::part(track) {
+          background: purple;
+        }
+
+        .toggle-part::part(handle) {
+          background: green;
+        }
+
+        .toggle-part::part(track) {
+          background: hotpink;
+        }
+      </style>
+
+      <script>
+        function printForm(ev) {}
+
+        function toggleBoolean(id, prop) {
+          var el = document.getElementById(id);
+
+          var isTrue = el[prop] ? false : true;
+          el[prop] = isTrue;
+        }
+
+        document.getElementById('eventPropagation').addEventListener('click', (evt) => {
+          evt.stopImmediatePropagation();
+          console.log('clicked');
+        });
+      </script>
+    </ion-app>
+  </body>
+</html>
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts
similarity index 97%
rename from core/src/components/toggle/test/basic/toggle.e2e.ts
rename to core/src/components/toggle/test/legacy/basic/toggle.e2e.ts
index bc38e2e12c8..65cfcf918ce 100644
--- a/core/src/components/toggle/test/basic/toggle.e2e.ts
+++ b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts
@@ -3,7 +3,7 @@ import { test } from '@utils/test/playwright';
 
 test.describe('toggle: basic', () => {
   test.beforeEach(async ({ page }) => {
-    await page.goto(`/src/components/toggle/test/basic`);
+    await page.goto(`/src/components/toggle/test/legacy/basic`);
   });
 
   test('should not have visual regressions', async ({ page }) => {
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Chrome-linux.png
rename to core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Firefox-linux.png
rename to core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Safari-linux.png
rename to core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Chrome-linux.png
rename to core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Firefox-linux.png
rename to core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Safari-linux.png
rename to core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/index.html b/core/src/components/toggle/test/legacy/enable-on-off-labels/index.html
new file mode 100644
index 00000000000..9b9a48c9670
--- /dev/null
+++ b/core/src/components/toggle/test/legacy/enable-on-off-labels/index.html
@@ -0,0 +1,284 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Toggle - enableOnOffLabels</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+
+    <style>
+      /*
+       * Dark Colors
+       * ------------------
+       */
+
+      body.dark {
+        --ion-color-primary: #428cff;
+        --ion-color-primary-rgb: 66, 140, 255;
+        --ion-color-primary-contrast: #ffffff;
+        --ion-color-primary-contrast-rgb: 255, 255, 255;
+        --ion-color-primary-shade: #3a7be0;
+        --ion-color-primary-tint: #5598ff;
+
+        --ion-color-secondary: #50c8ff;
+        --ion-color-secondary-rgb: 80, 200, 255;
+        --ion-color-secondary-contrast: #ffffff;
+        --ion-color-secondary-contrast-rgb: 255, 255, 255;
+        --ion-color-secondary-shade: #46b0e0;
+        --ion-color-secondary-tint: #62ceff;
+
+        --ion-color-tertiary: #6a64ff;
+        --ion-color-tertiary-rgb: 106, 100, 255;
+        --ion-color-tertiary-contrast: #ffffff;
+        --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+        --ion-color-tertiary-shade: #5d58e0;
+        --ion-color-tertiary-tint: #7974ff;
+
+        --ion-color-success: #2fdf75;
+        --ion-color-success-rgb: 47, 223, 117;
+        --ion-color-success-contrast: #000000;
+        --ion-color-success-contrast-rgb: 0, 0, 0;
+        --ion-color-success-shade: #29c467;
+        --ion-color-success-tint: #44e283;
+
+        --ion-color-warning: #ffd534;
+        --ion-color-warning-rgb: 255, 213, 52;
+        --ion-color-warning-contrast: #000000;
+        --ion-color-warning-contrast-rgb: 0, 0, 0;
+        --ion-color-warning-shade: #e0bb2e;
+        --ion-color-warning-tint: #ffd948;
+
+        --ion-color-danger: #ff4961;
+        --ion-color-danger-rgb: 255, 73, 97;
+        --ion-color-danger-contrast: #ffffff;
+        --ion-color-danger-contrast-rgb: 255, 255, 255;
+        --ion-color-danger-shade: #e04055;
+        --ion-color-danger-tint: #ff5b71;
+
+        --ion-color-dark: #f4f5f8;
+        --ion-color-dark-rgb: 244, 245, 248;
+        --ion-color-dark-contrast: #000000;
+        --ion-color-dark-contrast-rgb: 0, 0, 0;
+        --ion-color-dark-shade: #d7d8da;
+        --ion-color-dark-tint: #f5f6f9;
+
+        --ion-color-medium: #989aa2;
+        --ion-color-medium-rgb: 152, 154, 162;
+        --ion-color-medium-contrast: #000000;
+        --ion-color-medium-contrast-rgb: 0, 0, 0;
+        --ion-color-medium-shade: #86888f;
+        --ion-color-medium-tint: #a2a4ab;
+
+        --ion-color-light: #222428;
+        --ion-color-light-rgb: 34, 36, 40;
+        --ion-color-light-contrast: #ffffff;
+        --ion-color-light-contrast-rgb: 255, 255, 255;
+        --ion-color-light-shade: #1e2023;
+        --ion-color-light-tint: #383a3e;
+      }
+
+      /*
+       * iOS Dark Theme
+       * -------------------
+       */
+
+      .ios body.dark {
+        --ion-background-color: #000000;
+        --ion-background-color-rgb: 0, 0, 0;
+
+        --ion-text-color: #ffffff;
+        --ion-text-color-rgb: 255, 255, 255;
+
+        --ion-color-step-50: #0d0d0d;
+        --ion-color-step-100: #1a1a1a;
+        --ion-color-step-150: #262626;
+        --ion-color-step-200: #333333;
+        --ion-color-step-250: #404040;
+        --ion-color-step-300: #4d4d4d;
+        --ion-color-step-350: #595959;
+        --ion-color-step-400: #666666;
+        --ion-color-step-450: #737373;
+        --ion-color-step-500: #808080;
+        --ion-color-step-550: #8c8c8c;
+        --ion-color-step-600: #999999;
+        --ion-color-step-650: #a6a6a6;
+        --ion-color-step-700: #b3b3b3;
+        --ion-color-step-750: #bfbfbf;
+        --ion-color-step-800: #cccccc;
+        --ion-color-step-850: #d9d9d9;
+        --ion-color-step-900: #e6e6e6;
+        --ion-color-step-950: #f2f2f2;
+
+        --ion-toolbar-background: #0d0d0d;
+
+        --ion-item-background: #1c1c1c;
+        --ion-item-background-activated: #313131;
+      }
+
+      /*
+       * Material Design Dark Theme
+       * ------------------------------
+       */
+
+      .md body.dark {
+        --ion-background-color: #121212;
+        --ion-background-color-rgb: 18, 18, 18;
+
+        --ion-text-color: #ffffff;
+        --ion-text-color-rgb: 255, 255, 255;
+
+        --ion-border-color: #222222;
+
+        --ion-color-step-50: #1e1e1e;
+        --ion-color-step-100: #2a2a2a;
+        --ion-color-step-150: #363636;
+        --ion-color-step-200: #414141;
+        --ion-color-step-250: #4d4d4d;
+        --ion-color-step-300: #595959;
+        --ion-color-step-350: #656565;
+        --ion-color-step-400: #717171;
+        --ion-color-step-450: #7d7d7d;
+        --ion-color-step-500: #898989;
+        --ion-color-step-550: #949494;
+        --ion-color-step-600: #a0a0a0;
+        --ion-color-step-650: #acacac;
+        --ion-color-step-700: #b8b8b8;
+        --ion-color-step-750: #c4c4c4;
+        --ion-color-step-800: #d0d0d0;
+        --ion-color-step-850: #dbdbdb;
+        --ion-color-step-900: #e7e7e7;
+        --ion-color-step-950: #f3f3f3;
+
+        --ion-item-background: #1a1b1e;
+      }
+
+      /* Optional CSS, this is added for the flashing that happens when toggling between themes */
+      ion-item {
+        --transition: none;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Toggle - enableOnOffLabels</ion-title>
+          <ion-buttons slot="end">
+            <ion-button id="popover-trigger">Options</ion-button>
+          </ion-buttons>
+          <ion-popover class="options-popover" trigger="popover-trigger">
+            <ion-list lines="none">
+              <ion-item id="dark-mode">
+                <ion-label>Dark Mode</ion-label>
+                <ion-checkbox slot="end"></ion-checkbox>
+              </ion-item>
+            </ion-list>
+          </ion-popover>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content>
+        <ion-list>
+          <ion-item>
+            <ion-label>Unchecked</ion-label>
+            <ion-toggle slot="end" enable-on-off-labels="true"></ion-toggle>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Checked</ion-label>
+            <ion-toggle slot="end" enable-on-off-labels="true" checked></ion-toggle>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Secondary Unchecked</ion-label>
+            <ion-toggle slot="end" color="secondary" enable-on-off-labels="true"></ion-toggle>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Secondary Checked</ion-label>
+            <ion-toggle slot="end" color="secondary" enable-on-off-labels="true" checked></ion-toggle>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Success Unchecked</ion-label>
+            <ion-toggle slot="end" color="success" enable-on-off-labels="true"></ion-toggle>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Success Checked</ion-label>
+            <ion-toggle slot="end" color="success" enable-on-off-labels="true" checked></ion-toggle>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Danger Unchecked</ion-label>
+            <ion-toggle slot="end" color="danger" enable-on-off-labels="true"></ion-toggle>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Danger Checked</ion-label>
+            <ion-toggle slot="end" color="danger" enable-on-off-labels="true" checked></ion-toggle>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Tertiary Unchecked</ion-label>
+            <ion-toggle slot="end" color="tertiary" enable-on-off-labels="true"></ion-toggle>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Tertiary Checked</ion-label>
+            <ion-toggle slot="end" color="tertiary" enable-on-off-labels="true" checked></ion-toggle>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Light Unchecked</ion-label>
+            <ion-toggle slot="end" color="light" enable-on-off-labels="true"></ion-toggle>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Light Checked</ion-label>
+            <ion-toggle slot="end" color="light" enable-on-off-labels="true" checked></ion-toggle>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Medium Unchecked</ion-label>
+            <ion-toggle slot="end" color="medium" enable-on-off-labels="true"></ion-toggle>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Medium Checked</ion-label>
+            <ion-toggle slot="end" color="medium" enable-on-off-labels="true" checked></ion-toggle>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Dark Unchecked</ion-label>
+            <ion-toggle slot="end" color="dark" enable-on-off-labels="true"></ion-toggle>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Dark Checked</ion-label>
+            <ion-toggle slot="end" color="dark" enable-on-off-labels="true" checked></ion-toggle>
+          </ion-item>
+        </ion-list>
+      </ion-content>
+    </ion-app>
+
+    <script>
+      const darkModeCheckbox = document.querySelector('ion-checkbox');
+      darkModeCheckbox.addEventListener('ionChange', (ev) => {
+        if (ev.detail.checked) {
+          document.body.classList.add('dark');
+        } else {
+          document.body.classList.remove('dark');
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts
new file mode 100644
index 00000000000..f176dd54b0d
--- /dev/null
+++ b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts
@@ -0,0 +1,40 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('toggle: enableOnOffLabels', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(`/src/components/toggle/test/legacy/enable-on-off-labels`);
+  });
+
+  test('should not have visual regressions', async ({ page }) => {
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`toggle-on-off-labels-diff-${page.getSnapshotSettings()}.png`);
+  });
+
+  test.describe('dark mode', () => {
+    test('should not have visual regressions', async ({ page }) => {
+      const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+      const ionPopoverDidDismiss = await page.spyOnEvent('ionPopoverDidDismiss');
+
+      await page.click('#popover-trigger');
+      await ionPopoverDidPresent.next();
+
+      await page.click('#dark-mode');
+
+      await page.evaluate(() => {
+        const popover = document.querySelector('ion-popover');
+        return popover?.dismiss();
+      });
+      await ionPopoverDidDismiss.next();
+
+      await page.waitForChanges();
+
+      await page.setIonViewport();
+
+      expect(await page.screenshot()).toMatchSnapshot(
+        `toggle-on-off-labels-dark-mode-diff-${page.getSnapshotSettings()}.png`
+      );
+    });
+  });
+});
diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..2ca9afb64fc
Binary files /dev/null and b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..2019d85c49f
Binary files /dev/null and b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..838f1de7eb4
Binary files /dev/null and b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..31fa98c0e4d
Binary files /dev/null and b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..be7d881cfc7
Binary files /dev/null and b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..41a665fcc8b
Binary files /dev/null and b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..d5e6ea87df6
Binary files /dev/null and b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..dca4650ce3e
Binary files /dev/null and b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..2b6c1698fde
Binary files /dev/null and b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..366f07b7cae
Binary files /dev/null and b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..ecb7dd85c04
Binary files /dev/null and b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..b8b8867d540
Binary files /dev/null and b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..293c628b8c6
Binary files /dev/null and b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..4f07381af8b
Binary files /dev/null and b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..04a53e9887d
Binary files /dev/null and b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..50a4ad99a5f
Binary files /dev/null and b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..828cd6342b1
Binary files /dev/null and b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..9e3297934b7
Binary files /dev/null and b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..401384a0913
Binary files /dev/null and b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..a3a3cde9259
Binary files /dev/null and b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..f9080c11d06
Binary files /dev/null and b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..915b73f4c57
Binary files /dev/null and b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..35d6f569d23
Binary files /dev/null and b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..280173c5984
Binary files /dev/null and b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/sizes/index.html b/core/src/components/toggle/test/legacy/sizes/index.html
new file mode 100644
index 00000000000..ae0cb16679d
--- /dev/null
+++ b/core/src/components/toggle/test/legacy/sizes/index.html
@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Toggle - Sizes</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Toggle - Sizes</ion-title>
+          <ion-buttons slot="end">
+            <ion-button onClick="toggleDynamic()">Toggle</ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="ion-padding-horizontal">
+        <h1>Default</h1>
+        <ion-toggle></ion-toggle>
+        <ion-toggle checked></ion-toggle>
+        <ion-toggle color="danger"></ion-toggle>
+        <ion-toggle color="danger" checked></ion-toggle>
+        <ion-toggle color="tertiary" class="toggle-activated"></ion-toggle>
+        <ion-toggle color="tertiary" checked class="toggle-activated"></ion-toggle>
+
+        <h1>Custom Widths</h1>
+        <ion-toggle color="secondary" class="width-small"></ion-toggle>
+        <ion-toggle color="secondary" checked class="width-small"></ion-toggle>
+        <ion-toggle color="secondary" class="width-large"></ion-toggle>
+        <ion-toggle color="secondary" checked class="width-large"></ion-toggle>
+        <ion-toggle color="tertiary" class="width-large toggle-activated"></ion-toggle>
+        <ion-toggle color="tertiary" checked class="width-large toggle-activated"></ion-toggle>
+
+        <h1>Custom Heights</h1>
+        <div style="display: flex; flex-flow: column; float: left">
+          <ion-toggle class="height-small"></ion-toggle>
+          <ion-toggle checked class="height-small"></ion-toggle>
+        </div>
+        <ion-toggle class="height-large"></ion-toggle>
+        <ion-toggle checked class="height-large"></ion-toggle>
+        <ion-toggle class="handle-height-large"></ion-toggle>
+        <ion-toggle checked class="handle-height-large"></ion-toggle>
+        <ion-toggle checked class="handle-height-large toggle-activated"></ion-toggle>
+
+        <h1>Dynamic Sizes</h1>
+        <ion-toggle color="tertiary" class="dynamic-small width-small height-small"></ion-toggle>
+        <ion-toggle color="tertiary" checked class="dynamic-small width-small height-small"></ion-toggle>
+        <ion-toggle color="tertiary" class="dynamic-large width-large height-large"></ion-toggle>
+        <ion-toggle color="tertiary" checked class="dynamic-large width-large height-large"></ion-toggle>
+
+        <h1>Complex Custom Toggles</h1>
+        <ion-toggle mode="ios" class="all-custom"></ion-toggle>
+        <ion-toggle mode="ios" checked class="all-custom"></ion-toggle>
+
+        <ion-toggle class="custom-overflow"></ion-toggle>
+        <ion-toggle checked class="custom-overflow"></ion-toggle>
+
+        <ion-toggle mode="ios" color="dark" class="custom-spacing"></ion-toggle>
+        <ion-toggle mode="ios" color="dark" checked class="custom-spacing"></ion-toggle>
+
+        <ion-toggle mode="md" color="dark" class="custom-spacing"></ion-toggle>
+        <ion-toggle mode="md" color="dark" checked class="custom-spacing"></ion-toggle>
+
+        <ion-toggle mode="ios" class="icon-custom"></ion-toggle>
+        <ion-toggle mode="ios" checked class="icon-custom"></ion-toggle>
+      </ion-content>
+    </ion-app>
+
+    <style>
+      ion-toggle {
+        padding: 5px;
+      }
+
+      .width-small {
+        width: 40px;
+      }
+
+      .width-large {
+        width: 100px;
+      }
+
+      .ios.height-small {
+        height: 20px;
+
+        /* The height of the handle is 100% of the track height - 4px */
+        --handle-width: 16px;
+      }
+
+      .md.height-small {
+        height: 10px;
+
+        /* The height of the handle is 100% of the track height + 6px */
+        --handle-width: 16px;
+      }
+
+      .height-large {
+        height: 60px;
+
+        --border-radius: 4px;
+        --handle-border-radius: 4px;
+
+        --handle-width: 50%;
+      }
+
+      .handle-height-large {
+        height: 60px;
+
+        /*
+       * The max height of the handle is 100% of the track height - handle spacing
+       * so this will never show as being 150%
+       */
+        --handle-height: 150%;
+        --handle-width: 23px;
+        --handle-border-radius: 14px 4px 4px 14px;
+        --handle-transition: border-radius 120ms ease-in-out 80ms;
+      }
+
+      .handle-height-large.toggle-checked {
+        --handle-border-radius: 4px 14px 14px 4px;
+      }
+
+      .icon-custom {
+        --handle-background-checked: #fff url(/src/components/toggle/test/legacy/sizes/power-outline.svg) no-repeat
+          center / contain;
+      }
+
+      .icon-custom::before {
+        position: absolute;
+        content: 'ON';
+        color: white;
+        top: 16px;
+        left: 10px;
+        z-index: 1;
+        font-size: 8px;
+      }
+
+      .all-custom {
+        height: 20px;
+        width: 40px;
+
+        --track-background: #fff;
+        --track-background-checked: #0366a6;
+        --handle-background: #bbbbbb;
+        --handle-width: 20px;
+        --handle-height: 20px;
+        --handle-spacing: 0;
+        --handle-box-shadow: none;
+
+        border: 2px solid #bbb;
+        border-radius: 16px;
+      }
+
+      .all-custom.toggle-checked {
+        border-color: #0366a6;
+
+        --handle-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16), 0 3px 1px rgba(0, 0, 0, 0.1);
+      }
+
+      .custom-overflow {
+        overflow: visible;
+
+        contain: none;
+
+        --track-background-checked: #d6ffd6;
+
+        --handle-box-shadow: 0 3px 12px rgba(255, 0, 0, 0.6), 0 3px 1px rgba(50, 70, 255, 0.6);
+      }
+
+      .ios.custom-spacing {
+        --handle-height: 100%;
+        --handle-width: 32px;
+
+        --handle-spacing: 0;
+      }
+
+      .md.custom-spacing {
+        --handle-height: 100%;
+        --handle-width: 14px;
+
+        --handle-spacing: 0;
+      }
+    </style>
+
+    <script>
+      const smallToggles = document.querySelectorAll('.dynamic-small');
+      const largeToggles = document.querySelectorAll('.dynamic-large');
+
+      function toggleDynamic() {
+        for (var i = 0; i < smallToggles.length; i++) {
+          const toggle = smallToggles[i];
+
+          const hasClass = toggle.classList.contains('height-small');
+
+          if (hasClass) {
+            toggle.classList.remove('height-small');
+            toggle.classList.remove('width-small');
+          } else {
+            toggle.classList.add('height-small');
+            toggle.classList.add('width-small');
+          }
+        }
+
+        for (var i = 0; i < largeToggles.length; i++) {
+          const toggle = largeToggles[i];
+
+          const hasClass = toggle.classList.contains('height-large');
+
+          if (hasClass) {
+            toggle.classList.remove('height-large');
+            toggle.classList.remove('width-large');
+          } else {
+            toggle.classList.add('height-large');
+            toggle.classList.add('width-large');
+          }
+        }
+      }
+    </script>
+  </body>
+</html>
diff --git a/core/src/components/toggle/test/legacy/sizes/power-outline.svg b/core/src/components/toggle/test/legacy/sizes/power-outline.svg
new file mode 100644
index 00000000000..009582f7db8
--- /dev/null
+++ b/core/src/components/toggle/test/legacy/sizes/power-outline.svg
@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'><title>ionicons-v5-p</title><path d='M378,108a191.41,191.41,0,0,1,70,148c0,106-86,192-192,192S64,362,64,256a192,192,0,0,1,69-148' style='fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/><line x1='256' y1='64' x2='256' y2='256' style='fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/></svg>
\ No newline at end of file
diff --git a/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts b/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts
new file mode 100644
index 00000000000..89178873648
--- /dev/null
+++ b/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts
@@ -0,0 +1,12 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('toggle: sizes', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/toggle/test/legacy/sizes`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`toggle-sizes-diff-${page.getSnapshotSettings()}.png`);
+  });
+});
diff --git a/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..9941737e799
Binary files /dev/null and b/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..77bf55d5972
Binary files /dev/null and b/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..224f8c721c9
Binary files /dev/null and b/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..d206290c180
Binary files /dev/null and b/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..b39941027b6
Binary files /dev/null and b/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..b08d919979a
Binary files /dev/null and b/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..92217c67069
Binary files /dev/null and b/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..4415d19ece9
Binary files /dev/null and b/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..46abc250117
Binary files /dev/null and b/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..f1c73f512f2
Binary files /dev/null and b/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..e1146347411
Binary files /dev/null and b/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..c13a144bd5f
Binary files /dev/null and b/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/index.html b/core/src/components/toggle/test/sizes/index.html
index 7be12a7a680..0caa1531bad 100644
--- a/core/src/components/toggle/test/sizes/index.html
+++ b/core/src/components/toggle/test/sizes/index.html
@@ -97,16 +97,22 @@ <h1>Dynamic Sizes</h1>
 
         <h1>Complex Custom Toggles</h1>
         <ion-toggle aria-label="Custom" mode="ios" class="all-custom"></ion-toggle>
-        <ion-toggle aria-label="Custom" mode="ios" checked class="all-custom"></ion-toggle>
+        <ion-toggle aria-label="Custom" ode="ios" checked class="all-custom"></ion-toggle>
 
         <ion-toggle aria-label="Custom Overflow" class="custom-overflow"></ion-toggle>
         <ion-toggle aria-label="Custom Overflow" checked class="custom-overflow"></ion-toggle>
 
-        <ion-toggle aria-label="Custom Spacing iOS" mode="ios" color="dark" class="custom-spacing"></ion-toggle>
-        <ion-toggle aria-label="Custom Spacing iOS" mode="ios" color="dark" checked class="custom-spacing"></ion-toggle>
+        <ion-toggle aria-label="Custom Overflow iOS" mode="ios" color="dark" class="custom-spacing"></ion-toggle>
+        <ion-toggle
+          aria-label="Custom Overflow iOS"
+          mode="ios"
+          color="dark"
+          checked
+          class="custom-spacing"
+        ></ion-toggle>
 
-        <ion-toggle aria-label="Custom Spacing MD" mode="md" color="dark" class="custom-spacing"></ion-toggle>
-        <ion-toggle aria-label="Custom Spacing MD" mode="md" color="dark" checked class="custom-spacing"></ion-toggle>
+        <ion-toggle aria-label="Custom Overflow MD" mode="md" color="dark" class="custom-spacing"></ion-toggle>
+        <ion-toggle aria-label="Custom Overflow MD" mode="md" color="dark" checked class="custom-spacing"></ion-toggle>
 
         <ion-toggle aria-label="Custom Icon iOS" mode="ios" class="icon-custom"></ion-toggle>
         <ion-toggle aria-label="Custom Icon iOS" mode="ios" checked class="icon-custom"></ion-toggle>
@@ -114,44 +120,43 @@ <h1>Complex Custom Toggles</h1>
     </ion-app>
 
     <style>
-      ion-toggle {
-        padding: 5px;
-      }
-
-      .width-small {
+      .width-small::part(track) {
         width: 40px;
       }
 
-      .width-large {
+      .width-large::part(track) {
         width: 100px;
       }
 
-      .ios.height-small {
+      .ios.height-small::part(track) {
         height: 20px;
-
-        /* The height of the handle is 100% of the track height - 4px */
-        --handle-width: 16px;
       }
 
-      .md.height-small {
+      .md.height-small::part(track) {
         height: 10px;
+      }
 
-        /* The height of the handle is 100% of the track height + 6px */
+      .height-small {
+        /* The height of the handle is 100% of the track height - 4px */
         --handle-width: 16px;
       }
 
-      .height-large {
+      .height-large::part(track) {
         height: 60px;
+      }
 
+      .height-large {
         --border-radius: 4px;
         --handle-border-radius: 4px;
 
         --handle-width: 50%;
       }
 
-      .handle-height-large {
+      .handle-height-large::part(track) {
         height: 60px;
+      }
 
+      .handle-height-large {
         /*
        * The max height of the handle is 100% of the track height - handle spacing
        * so this will never show as being 150%
@@ -167,34 +172,38 @@ <h1>Complex Custom Toggles</h1>
       }
 
       .icon-custom {
-        --handle-background-checked: #fff url(/src/components/toggle/test/sizes/power-outline.svg) no-repeat center /
-          contain;
+        --handle-background-checked: #fff url(/src/components/toggle/test/legacy/sizes/power-outline.svg) no-repeat
+          center / contain;
       }
 
       .icon-custom::before {
         position: absolute;
         content: 'ON';
         color: white;
-        top: 16px;
-        left: 10px;
+        top: 11px;
+        left: 5px;
         z-index: 1;
         font-size: 8px;
       }
 
       .all-custom {
-        height: 20px;
-        width: 40px;
+        border: 2px solid #bbb;
+        border-radius: 16px;
 
-        --background: #fff;
-        --background-checked: #0366a6;
-        --handle-background: #bbbbbb;
         --handle-width: 20px;
-        --handle-height: 20px;
-        --handle-spacing: 0;
+        --handle-spacing: 0px;
+        --handle-background: #bbbbbb;
+        --handle-background-checked: white;
         --handle-box-shadow: none;
 
-        border: 2px solid #bbb;
-        border-radius: 16px;
+        --track-background: #ececec;
+      }
+
+      .all-custom::part(track) {
+        width: 40px;
+        height: 20px;
+
+        margin: 6px;
       }
 
       .all-custom.toggle-checked {
@@ -204,8 +213,6 @@ <h1>Complex Custom Toggles</h1>
       }
 
       .custom-overflow {
-        overflow: visible;
-
         contain: none;
 
         --background-checked: #d6ffd6;
@@ -213,6 +220,10 @@ <h1>Complex Custom Toggles</h1>
         --handle-box-shadow: 0 3px 12px rgba(255, 0, 0, 0.6), 0 3px 1px rgba(50, 70, 255, 0.6);
       }
 
+      .custom-overflow::part(track) {
+        overflow: visible;
+      }
+
       .ios.custom-spacing {
         --handle-height: 100%;
         --handle-width: 32px;
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Chrome-linux.png
index 9941737e799..37d2c874846 100644
Binary files a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Firefox-linux.png
index 77bf55d5972..d5559323a14 100644
Binary files a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Safari-linux.png
index 224f8c721c9..31385a6cf79 100644
Binary files a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Chrome-linux.png
index d206290c180..a2d0efc5215 100644
Binary files a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Firefox-linux.png
index b39941027b6..14f0553ad5f 100644
Binary files a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Safari-linux.png
index b08d919979a..f194f055a62 100644
Binary files a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Chrome-linux.png
index 92217c67069..9f609ce700b 100644
Binary files a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Firefox-linux.png
index 4415d19ece9..dc294826615 100644
Binary files a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Safari-linux.png
index 46abc250117..1c44ecde46b 100644
Binary files a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Chrome-linux.png
index f1c73f512f2..d89f7a205e1 100644
Binary files a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Firefox-linux.png
index e1146347411..a8d5b59c562 100644
Binary files a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Safari-linux.png
index c13a144bd5f..313555336b5 100644
Binary files a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/states/index.html b/core/src/components/toggle/test/states/index.html
new file mode 100644
index 00000000000..a1cc5cf78cf
--- /dev/null
+++ b/core/src/components/toggle/test/states/index.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Toggle - States</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(4, minmax(250px, 1fr));
+        grid-row-gap: 20px;
+        grid-column-gap: 20px;
+      }
+      h2 {
+        font-size: 12px;
+        font-weight: normal;
+
+        color: #6f7378;
+
+        margin-top: 10px;
+      }
+      @media screen and (max-width: 800px) {
+        .grid {
+          grid-template-columns: 1fr;
+          padding: 0;
+        }
+      }
+
+      ion-toggle {
+        width: 100%;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Toggle - States</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content" class="ion-padding">
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Unchecked</h2>
+            <ion-toggle>Enable Notifications</ion-toggle>
+          </div>
+
+          <div class="grid-item">
+            <h2>Checked</h2>
+            <ion-toggle checked="true">Enable Notifications</ion-toggle>
+          </div>
+
+          <div class="grid-item">
+            <h2>Disabled, Unchecked</h2>
+            <ion-toggle disabled="true">Enable Notifications</ion-toggle>
+          </div>
+
+          <div class="grid-item">
+            <h2>Disabled, Checked</h2>
+            <ion-toggle disabled="true" checked="true">Enable Notifications</ion-toggle>
+          </div>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts b/core/src/components/toggle/test/states/toggle.e2e.ts
new file mode 100644
index 00000000000..d65edc8bdff
--- /dev/null
+++ b/core/src/components/toggle/test/states/toggle.e2e.ts
@@ -0,0 +1,33 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('toggle: states', () => {
+  test('should render disabled toggle correctly', async ({ page, skip }) => {
+    skip.rtl();
+
+    await page.setContent(`
+      <ion-toggle disabled="true">Label</ion-toggle>
+    `);
+
+    const toggle = page.locator('ion-toggle');
+    expect(await toggle.screenshot()).toMatchSnapshot(`toggle-disabled-${page.getSnapshotSettings()}.png`);
+  });
+
+  test('should render checked toggle correctly', async ({ page }) => {
+    await page.setContent(`
+      <ion-toggle checked="true">Label</ion-toggle>
+    `);
+
+    const toggle = page.locator('ion-toggle');
+    expect(await toggle.screenshot()).toMatchSnapshot(`toggle-checked-${page.getSnapshotSettings()}.png`);
+  });
+
+  test('should render unchecked toggle correctly', async ({ page }) => {
+    await page.setContent(`
+      <ion-toggle>Label</ion-toggle>
+    `);
+
+    const toggle = page.locator('ion-toggle');
+    expect(await toggle.screenshot()).toMatchSnapshot(`toggle-unchecked-${page.getSnapshotSettings()}.png`);
+  });
+});
diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..4cbd99481f8
Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..d4babbe29e5
Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..6b1fa68732a
Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..6cdf07335b3
Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..3ce28f04ef1
Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..76c3996d09d
Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..e9255e44178
Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..862c1b47ddf
Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..4656cef5ab7
Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..0f471830ea0
Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..eb89384eed8
Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-md-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..82245836bc3
Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-checked-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-disabled-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-disabled-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..172f8326676
Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-disabled-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-disabled-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-disabled-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..3bf2db5be4d
Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-disabled-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-disabled-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-disabled-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..c3167fc43b3
Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-disabled-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-disabled-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-disabled-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..201c5143673
Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-disabled-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-disabled-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-disabled-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..b7582ecc29b
Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-disabled-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-disabled-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-disabled-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..8f3e4e3ea2b
Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-disabled-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..620d15ff4d2
Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..4828fb41c5a
Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..e3b3f9f3198
Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..b438ff5e584
Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..92eea55dab1
Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..aa2900abf60
Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..f31d0d8fac6
Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..89a94bc0fa2
Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..2cf05912991
Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..65af2228f4d
Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..3001e3ece87
Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-md-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..a229224eb48
Binary files /dev/null and b/core/src/components/toggle/test/states/toggle.e2e.ts-snapshots/toggle-unchecked-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/toggle.ios.scss b/core/src/components/toggle/toggle.ios.scss
index e44916498ca..8b32244d010 100644
--- a/core/src/components/toggle/toggle.ios.scss
+++ b/core/src/components/toggle/toggle.ios.scss
@@ -5,8 +5,8 @@
 // -----------------------------------------
 
 :host {
-  --background: #{$toggle-ios-background-color-off};
-  --background-checked: #{ion-color(primary, base)};
+  --track-background: #{$toggle-ios-background-color-off};
+  --track-background-checked: #{ion-color(primary, base)};
   --border-radius: #{$toggle-ios-border-radius};
   --handle-background: #{$toggle-ios-handle-background-color};
   --handle-background-checked: #{$toggle-ios-handle-background-color};
@@ -17,7 +17,9 @@
   --handle-width: #{$toggle-ios-handle-width};
   --handle-spacing: #{$toggle-ios-border-width};
   --handle-transition: #{$toggle-ios-transition};
+}
 
+:host(.legacy-toggle) {
   width: $toggle-ios-width;
   height: $toggle-ios-height;
 
@@ -26,6 +28,20 @@
   overflow: hidden;
 }
 
+// Toggle Native Wrapper
+// ----------------------------------------------------------------
+
+.native-wrapper .toggle-icon {
+  width: $toggle-ios-width;
+  height: $toggle-ios-height;
+
+  /**
+   * The handle box shadow should not
+   * overflow outside of the track container.
+   */
+  overflow: hidden;
+}
+
 :host(.ion-color.toggle-checked) .toggle-icon {
   background: current-color(base);
 }
@@ -165,7 +181,7 @@
 // iOS Toggle Within An Item
 // ----------------------------------------------------------
 
-:host(.in-item[slot]) {
+:host(.in-item.legacy-toggle[slot]) {
   @include margin($toggle-ios-media-margin);
   @include padding(
     $toggle-ios-item-end-padding-top,
@@ -175,7 +191,7 @@
   );
 }
 
-:host(.in-item[slot="start"]) {
+:host(.in-item.legacy-toggle[slot="start"]) {
   @include padding(
     $toggle-ios-item-start-padding-top,
     $toggle-ios-item-start-padding-end,
diff --git a/core/src/components/toggle/toggle.md.scss b/core/src/components/toggle/toggle.md.scss
index 0ddd11ea469..0f35fb37a7c 100644
--- a/core/src/components/toggle/toggle.md.scss
+++ b/core/src/components/toggle/toggle.md.scss
@@ -5,8 +5,8 @@
 // -----------------------------------------
 
 :host {
-  --background: #{$toggle-md-track-background-color-off};
-  --background-checked: #{ion-color(primary, base, $toggle-md-track-background-color-alpha-on)};
+  --track-background: #{$toggle-md-track-background-color-off};
+  --track-background-checked: #{ion-color(primary, base, $toggle-md-track-background-color-alpha-on)};
   --border-radius: #{$toggle-md-track-height};
   --handle-background: #{$toggle-md-handle-background-color-off};
   --handle-background-checked: #{ion-color(primary, base)};
@@ -17,15 +17,24 @@
   --handle-max-height: #{$toggle-md-handle-max-height};
   --handle-spacing: 0;
   --handle-transition: #{$toggle-md-transition};
+}
 
+:host(.legacy-toggle) {
   @include padding($toggle-md-padding-top, $toggle-md-padding-end, $toggle-md-padding-bottom, $toggle-md-padding-start);
-
   width: $toggle-md-track-width;
   height: $toggle-md-track-height;
 
   contain: strict;
 }
 
+// Toggle Native Wrapper
+// ----------------------------------------------------------------
+
+.native-wrapper .toggle-icon {
+  width: $toggle-md-track-width;
+  height: $toggle-md-track-height;
+}
+
 :host(.ion-color.toggle-checked) .toggle-icon {
   background: current-color(base, $toggle-md-track-background-color-alpha-on);
 }
@@ -76,7 +85,7 @@
 // Material Design Toggle Within An Item
 // ----------------------------------------------------------
 
-:host(.in-item[slot]) {
+:host(.in-item.legacy-toggle[slot]) {
   @include margin(
     $toggle-md-media-margin-top,
     $toggle-md-media-margin-end,
@@ -93,7 +102,7 @@
   cursor: pointer;
 }
 
-:host(.in-item[slot="start"]) {
+:host(.in-item.legacy-toggle[slot="start"]) {
   @include padding(
     $toggle-md-item-start-padding-top,
     $toggle-md-item-start-padding-end,
diff --git a/core/src/components/toggle/toggle.scss b/core/src/components/toggle/toggle.scss
index eb6021b0033..10b1164d0c5 100644
--- a/core/src/components/toggle/toggle.scss
+++ b/core/src/components/toggle/toggle.scss
@@ -5,8 +5,8 @@
 
 :host {
   /**
-   * @prop --background: Background of the toggle
-   * @prop --background-checked: Background of the toggle when checked
+   * @prop --track-background: Background of the toggle track
+   * @prop --track-background-checked: Background of the toggle track when checked
    * @prop --border-radius: Border radius of the toggle track
    *
    * @prop --handle-background: Background of the toggle handle
@@ -28,15 +28,25 @@
 
   position: relative;
 
+  max-width: 100%;
+
   outline: none;
 
-  contain: content;
   cursor: pointer;
   touch-action: none;
   user-select: none;
   z-index: $z-index-item-input;
 }
 
+:host(.in-item:not(.legacy-toggle)) {
+  width: 100%;
+  height: 100%;
+}
+
+:host(.legacy-toggle) {
+  contain: content;
+}
+
 :host(.ion-focused) input {
   border: 2px solid #5e9ed6;
 }
@@ -45,7 +55,7 @@
   pointer-events: none;
 }
 
-label {
+:host(.legacy-toggle) label {
   @include input-cover();
 
   display: flex;
@@ -61,6 +71,140 @@ input {
   @include visually-hidden();
 }
 
+// Toggle Wrapper
+// --------------------------------------------------
+
+.toggle-wrapper {
+  display: flex;
+
+  position: relative;
+
+  flex-grow: 1;
+
+  align-items: center;
+
+  height: 100%;
+
+  transition: background-color 15ms linear;
+
+  cursor: inherit;
+}
+
+// Input Label
+// ----------------------------------------------------------------
+
+.label-text-wrapper {
+  /**
+   * This ensures that double tapping this text
+   * clicks the <label> and focuses the input
+   * when a screen reader is enabled.
+   */
+  pointer-events: none;
+
+  text-overflow: ellipsis;
+
+  white-space: nowrap;
+
+  overflow: hidden;
+}
+
+/**
+ * If no label text is placed into the slot
+ * then the element should be hidden otherwise
+ * there will be additional margins added.
+ */
+.label-text-wrapper-hidden {
+  display: none;
+}
+
+// Toggle Native Wrapper
+// ----------------------------------------------------------------
+
+.native-wrapper {
+  display: flex;
+
+  align-items: center;
+}
+
+// Toggle Justify
+// --------------------------------------------------
+
+:host(.toggle-justify-space-between) .toggle-wrapper {
+  justify-content: space-between;
+}
+
+:host(.toggle-justify-start) .toggle-wrapper {
+  justify-content: start;
+}
+
+:host(.toggle-justify-end) .toggle-wrapper {
+  justify-content: end;
+}
+
+// Toggle Label Placement - Start
+// ----------------------------------------------------------------
+
+/**
+ * Label is on the left of the input in LTR and
+ * on the right in RTL.
+ */
+:host(.toggle-label-placement-start) .toggle-wrapper {
+  flex-direction: row;
+}
+
+:host(.toggle-label-placement-start) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the input should be on the end
+   * when the label sits at the start.
+   */
+  @include margin(0, 8px, 0, 0);
+}
+
+// Toggle Label Placement - End
+// ----------------------------------------------------------------
+
+/**
+ * Label is on the right of the input in LTR and
+ * on the left in RTL.
+ */
+:host(.toggle-label-placement-end) .toggle-wrapper {
+  flex-direction: row-reverse;
+}
+
+/**
+ * The margin between the label and
+ * the input should be on the start
+ * when the label sits at the end.
+ */
+:host(.toggle-label-placement-end) .label-text-wrapper {
+  @include margin(0, 0, 0, 8px);
+}
+
+// Input Label Placement - Fixed
+// ----------------------------------------------------------------
+
+:host(.toggle-label-placement-fixed) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the input should be on the end
+   * when the label sits at the start.
+   */
+  @include margin(0, 8px, 0, 0);
+}
+
+/**
+ * Label is on the left of the input in LTR and
+ * on the right in RTL. Label also has a fixed width.
+ */
+:host(.toggle-label-placement-fixed) .label-text-wrapper {
+  flex: 0 0 100px;
+
+  width: 100px;
+  min-width: 100px;
+  max-width: 200px;
+}
+
 // Toggle Background Track: Unchecked
 // --------------------------------------------------
 
@@ -89,7 +233,7 @@ input {
   width: 100%;
   height: 100%;
 
-  background: var(--background);
+  background: var(--track-background);
 
   pointer-events: none;
 
@@ -100,7 +244,7 @@ input {
 // ----------------------------------------------------------
 
 :host(.toggle-checked) .toggle-icon {
-  background: var(--background-checked);
+  background: var(--track-background-checked);
 }
 
 // Toggle Inner Knob: Unchecked
@@ -111,6 +255,9 @@ input {
 
   position: absolute;
 
+  // stylelint-disable-next-line property-disallowed-list
+  left: var(--handle-spacing);
+
   width: var(--handle-width);
   height: var(--handle-height);
 
diff --git a/core/src/components/toggle/toggle.tsx b/core/src/components/toggle/toggle.tsx
index e3919d41bba..73b939a640b 100644
--- a/core/src/components/toggle/toggle.tsx
+++ b/core/src/components/toggle/toggle.tsx
@@ -1,10 +1,15 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil/core';
+// TODO(FW-2845) - Use @utils/forms and @utils/logging when https://github.com/ionic-team/stencil/issues/3826 is resolved
 import { checkmarkOutline, removeOutline, ellipseOutline } from 'ionicons/icons';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Color, Gesture, GestureDetail, Mode, StyleEventDetail, ToggleChangeEventDetail } from '../../interface';
-import { getAriaLabel, renderHiddenInput } from '../../utils/helpers';
+import type { LegacyFormController } from '../../utils/forms';
+import { createLegacyFormController } from '../../utils/forms';
+import { getAriaLabel, renderHiddenInput, inheritAriaAttributes } from '../../utils/helpers';
+import type { Attributes } from '../../utils/helpers';
+import { printIonWarning } from '../../utils/logging';
 import { hapticSelection } from '../../utils/native/haptic';
 import { isRTL } from '../../utils/rtl';
 import { createColorClasses, hostContext } from '../../utils/theme';
@@ -12,6 +17,8 @@ import { createColorClasses, hostContext } from '../../utils/theme';
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
+ * @slot - The label text to associate with the toggle. Use the "labelPlacement" property to control where the label is placed relative to the toggle.
+ *
  * @part track - The background track of the toggle.
  * @part handle - The toggle handle, or knob, used to change the checked state.
  */
@@ -28,8 +35,13 @@ export class Toggle implements ComponentInterface {
   private gesture?: Gesture;
   private focusEl?: HTMLElement;
   private lastDrag = 0;
+  private legacyFormController!: LegacyFormController;
+  private inheritedAttributes: Attributes = {};
+
+  // This flag ensures we log the deprecation warning at most once.
+  private hasLoggedDeprecationWarning = false;
 
-  @Element() el!: HTMLElement;
+  @Element() el!: HTMLIonToggleElement;
 
   @State() activated = false;
 
@@ -69,6 +81,25 @@ export class Toggle implements ComponentInterface {
    */
   @Prop() enableOnOffLabels: boolean | undefined = undefined;
 
+  /**
+   * Where to place the label relative to the input.
+   * `'start'`: The label will appear to the left of the toggle in LTR and to the right in RTL.
+   * `'end'`: The label will appear to the right of the toggle in LTR and to the left in RTL.
+   * `'fixed'`: The label has the same behavior as `'start'` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+   */
+  @Prop() labelPlacement: 'start' | 'end' | 'fixed' = 'start';
+
+  /**
+   * How to pack the label and toggle within a line.
+   * `'start'`: The label and toggle will appear on the left in LTR and
+   * on the right in RTL.
+   * `'end'`: The label and toggle will appear on the right in LTR and
+   * on the left in RTL.
+   * `'space-between'`: The label and toggle will appear on opposite
+   * ends of the line with space between the two elements.
+   */
+  @Prop() justify: 'start' | 'end' | 'space-between' = 'space-between';
+
   /**
    * Emitted when the user switches the toggle on or off. Does not emit
    * when programmatically changing the value of the `checked` property.
@@ -112,8 +143,12 @@ export class Toggle implements ComponentInterface {
   }
 
   async connectedCallback() {
+    const { el } = this;
+
+    this.legacyFormController = createLegacyFormController(el);
+
     this.gesture = (await import('../../utils/gesture')).createGesture({
-      el: this.el,
+      el,
       gestureName: 'toggle',
       gesturePriority: 100,
       threshold: 5,
@@ -134,6 +169,12 @@ export class Toggle implements ComponentInterface {
 
   componentWillLoad() {
     this.emitStyle();
+
+    if (!this.legacyFormController.hasLegacyControl()) {
+      this.inheritedAttributes = {
+        ...inheritAriaAttributes(this.el),
+      };
+    }
   }
 
   private emitStyle() {
@@ -210,8 +251,99 @@ export class Toggle implements ComponentInterface {
     );
   }
 
+  private renderToggleControl() {
+    const mode = getIonMode(this);
+
+    const { enableOnOffLabels, checked } = this;
+    return (
+      <div class="toggle-icon" part="track">
+        {/* The iOS on/off labels are rendered outside of .toggle-icon-wrapper,
+         since the wrapper is translated when the handle is interacted with and
+         this would move the on/off labels outside of the view box */}
+        {enableOnOffLabels &&
+          mode === 'ios' && [this.renderOnOffSwitchLabels(mode, true), this.renderOnOffSwitchLabels(mode, false)]}
+        <div class="toggle-icon-wrapper">
+          <div class="toggle-inner" part="handle">
+            {enableOnOffLabels && mode === 'md' && this.renderOnOffSwitchLabels(mode, checked)}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  private get hasLabel() {
+    return this.el.textContent !== '';
+  }
+
   render() {
-    const { activated, color, checked, disabled, el, inputId, name, enableOnOffLabels } = this;
+    const { legacyFormController } = this;
+
+    return legacyFormController.hasLegacyControl() ? this.renderLegacyToggle() : this.renderToggle();
+  }
+
+  private renderToggle() {
+    const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name } = this;
+
+    const mode = getIonMode(this);
+    const value = this.getValue();
+    const rtl = isRTL(el) ? 'rtl' : 'ltr';
+    renderHiddenInput(true, el, name, checked ? value : '', disabled);
+
+    return (
+      <Host
+        onClick={this.onClick}
+        class={createColorClasses(color, {
+          [mode]: true,
+          'in-item': hostContext('ion-item', el),
+          'toggle-activated': activated,
+          'toggle-checked': checked,
+          'toggle-disabled': disabled,
+          [`toggle-justify-${justify}`]: true,
+          [`toggle-label-placement-${labelPlacement}`]: true,
+          [`toggle-${rtl}`]: true,
+        })}
+      >
+        <label class="toggle-wrapper">
+          <div
+            class={{
+              'label-text-wrapper': true,
+              'label-text-wrapper-hidden': !this.hasLabel,
+            }}
+          >
+            <slot></slot>
+          </div>
+          <div class="native-wrapper">{this.renderToggleControl()}</div>
+          <input
+            type="checkbox"
+            role="switch"
+            aria-checked={`${checked}`}
+            checked={checked}
+            disabled={disabled}
+            id={inputId}
+            onFocus={() => this.onFocus()}
+            onBlur={() => this.onBlur()}
+            ref={(focusEl) => (this.focusEl = focusEl)}
+            {...this.inheritedAttributes}
+          />
+        </label>
+      </Host>
+    );
+  }
+
+  private renderLegacyToggle() {
+    if (!this.hasLoggedDeprecationWarning) {
+      printIonWarning(
+        `Using ion-toggle with an ion-label has been deprecated. To migrate, remove the ion-label and pass your label directly into ion-toggle instead.
+
+Example: <ion-toggle>Email:</ion-toggle>
+
+For toggles that do not have a visible label, developers should use "aria-label" so screen readers can announce the purpose of the toggle.`,
+        this.el
+      );
+      this.hasLoggedDeprecationWarning = true;
+    }
+
+    const { activated, color, checked, disabled, el, inputId, name } = this;
     const mode = getIonMode(this);
     const { label, labelId, labelText } = getAriaLabel(el, inputId);
     const value = this.getValue();
@@ -232,22 +364,12 @@ export class Toggle implements ComponentInterface {
           'toggle-activated': activated,
           'toggle-checked': checked,
           'toggle-disabled': disabled,
+          'legacy-toggle': true,
           interactive: true,
           [`toggle-${rtl}`]: true,
         })}
       >
-        <div class="toggle-icon" part="track">
-          {/* The iOS on/off labels are rendered outside of .toggle-icon-wrapper,
-           since the wrapper is translated when the handle is interacted with and
-           this would move the on/off labels outside of the view box */}
-          {enableOnOffLabels &&
-            mode === 'ios' && [this.renderOnOffSwitchLabels(mode, true), this.renderOnOffSwitchLabels(mode, false)]}
-          <div class="toggle-icon-wrapper">
-            <div class="toggle-inner" part="handle">
-              {enableOnOffLabels && mode === 'md' && this.renderOnOffSwitchLabels(mode, checked)}
-            </div>
-          </div>
-        </div>
+        {this.renderToggleControl()}
         <label htmlFor={inputId}>{labelText}</label>
         <input
           type="checkbox"
diff --git a/core/src/utils/forms/form-controller.ts b/core/src/utils/forms/form-controller.ts
index 3c45bad41ed..d59da6fb0b4 100644
--- a/core/src/utils/forms/form-controller.ts
+++ b/core/src/utils/forms/form-controller.ts
@@ -4,8 +4,9 @@
  * @internal
  * @prop el: The Ionic form component to reference
  */
-export const createLegacyFormController = (el: HTMLIonInputElement): LegacyFormController => {
-  const controlEl: HTMLIonInputElement = el;
+type AllowedFormElements = HTMLIonInputElement | HTMLIonToggleElement;
+export const createLegacyFormController = (el: AllowedFormElements): LegacyFormController => {
+  const controlEl: AllowedFormElements = el;
   let legacyControl = true;
 
   /**
@@ -13,8 +14,12 @@ export const createLegacyFormController = (el: HTMLIonInputElement): LegacyFormC
    * so a deprecation warning is logged. This warning can be disabled
    * by either using the new `label` property or setting `aria-label`
    * on the control.
+   * Alternatively, components that use a slot for the label
+   * can check to see if the component has slotted text
+   * in the light DOM.
    */
-  const hasLabelProp = controlEl.label !== undefined;
+  const hasLabelProp =
+    (controlEl as any).label !== undefined || (controlEl.shadowRoot !== null && controlEl.textContent !== '');
   const hasAriaLabelAttribute = controlEl.hasAttribute('aria-label');
 
   legacyControl = !hasLabelProp && !hasAriaLabelAttribute;
diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
index 5d478567899..8d13367cf88 100644
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@@ -812,6 +812,8 @@ export const IonToggle = /*@__PURE__*/ defineContainer<JSX.IonToggle>('ion-toggl
   'disabled',
   'value',
   'enableOnOffLabels',
+  'labelPlacement',
+  'justify',
   'ionChange',
   'ionFocus',
   'ionBlur',