diff --git a/core/src/components/checkbox/checkbox.scss b/core/src/components/checkbox/checkbox.scss
index 24188dbc33..9f2b6269ea 100644
--- a/core/src/components/checkbox/checkbox.scss
+++ b/core/src/components/checkbox/checkbox.scss
@@ -1,4 +1,5 @@
 @import "../../themes/ionic.globals";
+@import "./checkbox.vars.scss";
 
 // Checkbox
 // --------------------------------------------------
@@ -103,6 +104,10 @@
   overflow: hidden;
 }
 
+:host(.in-item:not(.legacy-checkbox)) .label-text-wrapper {
+  @include margin($checkbox-item-label-margin-top, null, $checkbox-item-label-margin-bottom, null);
+}
+
 /**
  * If no label text is placed into the slot
  * then the element should be hidden otherwise
@@ -194,7 +199,7 @@ input {
    * the checkbox should be on the end
    * when the label sits at the start.
    */
-  @include margin(0, $form-control-label-margin, 0, 0);
+  @include margin(null, $form-control-label-margin, null, 0);
 }
 
 
@@ -215,7 +220,7 @@ input {
  * when the label sits at the end.
  */
 :host(.checkbox-label-placement-end) .label-text-wrapper {
-  @include margin(0, 0, 0, $form-control-label-margin);
+  @include margin(null, 0, null, $form-control-label-margin);
 }
 
 
@@ -228,7 +233,7 @@ input {
    * the checkbox should be on the end
    * when the label sits at the start.
    */
-  @include margin(0, $form-control-label-margin, 0, 0);
+  @include margin(null, $form-control-label-margin, null, 0);
 }
 
 /**
diff --git a/core/src/components/checkbox/checkbox.vars.scss b/core/src/components/checkbox/checkbox.vars.scss
new file mode 100644
index 0000000000..2116a369e8
--- /dev/null
+++ b/core/src/components/checkbox/checkbox.vars.scss
@@ -0,0 +1,5 @@
+/// @prop - Top margin of checkbox's label when in an item
+$checkbox-item-label-margin-top: 10px !default;
+
+/// @prop - Bottom margin of checkbox's label when in an item
+$checkbox-item-label-margin-bottom: 10px !default;
\ No newline at end of file
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts b/core/src/components/checkbox/test/item/checkbox.e2e.ts
index 676d8ebf75..7162857e85 100644
--- a/core/src/components/checkbox/test/item/checkbox.e2e.ts
+++ b/core/src/components/checkbox/test/item/checkbox.e2e.ts
@@ -50,3 +50,24 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('checkbox: long label in item'), () => {
+    test('should render margins correctly when using long label in item', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-list>
+            <ion-item>
+              <ion-checkbox justify="start">
+                <ion-label class="ion-text-wrap">Enable Notifications Enable Notifications Enable Notifications</ion-label>
+              </ion-checkbox>
+            </ion-item>
+          </ion-list>
+        `,
+        config
+      );
+      const list = page.locator('ion-list');
+      expect(await list.screenshot()).toMatchSnapshot(screenshot(`checkbox-long-label-in-item`));
+    });
+  });
+});
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-md-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..25884f0428
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-md-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..fc9274c51a
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-md-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..b92c6febf2
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/item/index.html b/core/src/components/checkbox/test/item/index.html
index a1628f44bd..156e3ca6dc 100644
--- a/core/src/components/checkbox/test/item/index.html
+++ b/core/src/components/checkbox/test/item/index.html
@@ -148,6 +148,19 @@
             </ion-list>
           </div>
         </div>
+
+        <h1>Multiline Label</h1>
+        <div class="grid">
+          <div class="grid-item">
+            <ion-item>
+              <ion-checkbox justify="start">
+                <ion-label class="ion-text-wrap">
+                  Enable Notifications Enable Notifications Enable Notifications
+                </ion-label>
+              </ion-checkbox>
+            </ion-item>
+          </div>
+        </div>
       </ion-content>
     </ion-app>
   </body>
diff --git a/core/src/components/radio/radio.scss b/core/src/components/radio/radio.scss
index aa599021d0..3fe6053680 100644
--- a/core/src/components/radio/radio.scss
+++ b/core/src/components/radio/radio.scss
@@ -1,4 +1,5 @@
 @import "../../themes/ionic.globals";
+@import "./radio.vars.scss";
 
 // Radio
 // --------------------------------------------------
@@ -122,6 +123,10 @@ input {
   overflow: hidden;
 }
 
+:host(.in-item:not(.legacy-radio)) .label-text-wrapper {
+  @include margin($radio-item-label-margin-top, null, $radio-item-label-margin-bottom, null);
+}
+
 /**
  * If no label text is placed into the slot
  * then the element should be hidden otherwise
@@ -172,7 +177,7 @@ input {
    * the radio should be on the end
    * when the label sits at the start.
    */
-  @include margin(0, $form-control-label-margin, 0, 0);
+  @include margin(null, $form-control-label-margin, null, 0);
 }
 
 // Radio Label Placement - End
@@ -192,7 +197,7 @@ input {
  * when the label sits at the end.
  */
 :host(.radio-label-placement-end) .label-text-wrapper {
-  @include margin(0, 0, 0, $form-control-label-margin);
+  @include margin(null, 0, null, $form-control-label-margin);
 }
 
 // Radio Label Placement - Fixed
@@ -204,7 +209,7 @@ input {
    * the radio should be on the end
    * when the label sits at the start.
    */
-  @include margin(0, $form-control-label-margin, 0, 0);
+  @include margin(null, $form-control-label-margin, null, 0);
 }
 
 /**
diff --git a/core/src/components/radio/radio.vars.scss b/core/src/components/radio/radio.vars.scss
new file mode 100644
index 0000000000..76dbfaf79f
--- /dev/null
+++ b/core/src/components/radio/radio.vars.scss
@@ -0,0 +1,5 @@
+/// @prop - Top margin of radio's label when in an item
+$radio-item-label-margin-top: 10px !default;
+
+/// @prop - Bottom margin of radio's label when in an item
+$radio-item-label-margin-bottom: 10px !default;
\ No newline at end of file
diff --git a/core/src/components/radio/test/item/index.html b/core/src/components/radio/test/item/index.html
index 713e6f1435..42235e4115 100644
--- a/core/src/components/radio/test/item/index.html
+++ b/core/src/components/radio/test/item/index.html
@@ -165,6 +165,21 @@
             </ion-radio-group>
           </ion-list>
         </div>
+
+        <h1>Multiline Label</h1>
+        <div class="grid">
+          <div class="grid-item">
+            <ion-radio-group>
+              <ion-item>
+                <ion-radio justify="start">
+                  <ion-label class="ion-text-wrap">
+                    Enable Notifications Enable Notifications Enable Notifications
+                  </ion-label>
+                </ion-radio>
+              </ion-item>
+            </ion-radio-group>
+          </div>
+        </div>
       </ion-content>
     </ion-app>
   </body>
diff --git a/core/src/components/radio/test/item/radio.e2e.ts b/core/src/components/radio/test/item/radio.e2e.ts
index de3842bafd..63fd8f6cb7 100644
--- a/core/src/components/radio/test/item/radio.e2e.ts
+++ b/core/src/components/radio/test/item/radio.e2e.ts
@@ -37,3 +37,26 @@ configs().forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('radio: long label in item'), () => {
+    test('should render margins correctly when using long label in item', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-list>
+            <ion-radio-group>
+              <ion-item>
+                <ion-radio justify="start">
+                  <ion-label class="ion-text-wrap">Enable Notifications Enable Notifications Enable Notifications</ion-label>
+                </ion-radio>
+              </ion-item>
+            </ion-radio-group>
+          </ion-list>
+        `,
+        config
+      );
+      const list = page.locator('ion-list');
+      expect(await list.screenshot()).toMatchSnapshot(screenshot(`radio-long-label-in-item`));
+    });
+  });
+});
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-long-label-in-item-md-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-long-label-in-item-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..95e3cf24e3
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-long-label-in-item-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-long-label-in-item-md-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-long-label-in-item-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..a194f42006
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-long-label-in-item-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-long-label-in-item-md-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-long-label-in-item-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..3eaf91451f
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-long-label-in-item-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/item/index.html b/core/src/components/toggle/test/item/index.html
index a6defb1771..e954e7db11 100644
--- a/core/src/components/toggle/test/item/index.html
+++ b/core/src/components/toggle/test/item/index.html
@@ -134,6 +134,19 @@
             </ion-list>
           </div>
         </div>
+
+        <h1>Multiline Label</h1>
+        <div class="grid">
+          <div class="grid-item">
+            <ion-item>
+              <ion-toggle justify="start">
+                <ion-label class="ion-text-wrap">
+                  Enable Notifications Enable Notifications Enable Notifications
+                </ion-label>
+              </ion-toggle>
+            </ion-item>
+          </div>
+        </div>
       </ion-content>
     </ion-app>
   </body>
diff --git a/core/src/components/toggle/test/item/label.e2e.ts b/core/src/components/toggle/test/item/label.e2e.ts
index e3132ef841..d7651ae0ea 100644
--- a/core/src/components/toggle/test/item/label.e2e.ts
+++ b/core/src/components/toggle/test/item/label.e2e.ts
@@ -50,3 +50,24 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('toggle: long label in item'), () => {
+    test('should render margins correctly when using long label in item', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-list>
+            <ion-item>
+              <ion-toggle justify="start">
+                <ion-label class="ion-text-wrap">Enable Notifications Enable Notifications Enable Notifications</ion-label>
+              </ion-toggle>
+            </ion-item>
+          </ion-list>
+        `,
+        config
+      );
+      const list = page.locator('ion-list');
+      expect(await list.screenshot()).toMatchSnapshot(screenshot(`toggle-long-label-in-item`));
+    });
+  });
+});
diff --git a/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-long-label-in-item-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-long-label-in-item-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..bfa2801a26
Binary files /dev/null and b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-long-label-in-item-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-long-label-in-item-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-long-label-in-item-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..04ef942225
Binary files /dev/null and b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-long-label-in-item-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-long-label-in-item-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-long-label-in-item-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..7d7f6a080e
Binary files /dev/null and b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-long-label-in-item-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/toggle.scss b/core/src/components/toggle/toggle.scss
index 6fd138d329..ef10a95178 100644
--- a/core/src/components/toggle/toggle.scss
+++ b/core/src/components/toggle/toggle.scss
@@ -1,4 +1,5 @@
 @import "../../themes/ionic.globals";
+@import "./toggle.vars.scss";
 
 // Toggle
 // --------------------------------------------------
@@ -120,6 +121,10 @@ input {
   overflow: hidden;
 }
 
+:host(.in-item:not(.legacy-toggle)) .label-text-wrapper {
+  @include margin($toggle-item-label-margin-top, null, $toggle-item-label-margin-bottom, null);
+}
+
 /**
  * If no label text is placed into the slot
  * then the element should be hidden otherwise
@@ -170,7 +175,7 @@ input {
    * the input should be on the end
    * when the label sits at the start.
    */
-  @include margin(0, $form-control-label-margin, 0, 0);
+  @include margin(null, $form-control-label-margin, null, 0);
 }
 
 // Toggle Label Placement - End
@@ -190,7 +195,7 @@ input {
  * when the label sits at the end.
  */
 :host(.toggle-label-placement-end) .label-text-wrapper {
-  @include margin(0, 0, 0, $form-control-label-margin);
+  @include margin(null, 0, null, $form-control-label-margin);
 }
 
 // Input Label Placement - Fixed
@@ -202,7 +207,7 @@ input {
    * the input should be on the end
    * when the label sits at the start.
    */
-  @include margin(0, $form-control-label-margin, 0, 0);
+  @include margin(null, $form-control-label-margin, null, 0);
 }
 
 /**
diff --git a/core/src/components/toggle/toggle.vars.scss b/core/src/components/toggle/toggle.vars.scss
new file mode 100644
index 0000000000..629eb5048b
--- /dev/null
+++ b/core/src/components/toggle/toggle.vars.scss
@@ -0,0 +1,5 @@
+/// @prop - Top margin of toggle's label when in an item
+$toggle-item-label-margin-top: 10px !default;
+
+/// @prop - Bottom margin of toggle's label when in an item
+$toggle-item-label-margin-bottom: 10px !default;
\ No newline at end of file