fix(checkbox): align checkbox properly in item using start alignment

core/src/components/checkbox/checkbox.scss

@@ -87,7 +87,10 @@
   overflow: hidden;
 }
 
-:host(.in-item) .label-text-wrapper {
+// Checkboxes that are not slotted inside an item and are not used with a
+// stacked label should have margins equal to those of the label.
+:host(.in-item) .label-text-wrapper,
+:host(.in-item:not(.checkbox-label-placement-stacked):not([slot])) .native-wrapper {
   @include margin($checkbox-item-label-margin-top, null, $checkbox-item-label-margin-bottom, null);
 }
 

core/src/components/checkbox/test/item/checkbox.e2e.ts

@@ -51,7 +51,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   });
 });
 
-configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, config }) => {
+configs({ directions: ['ltr'] }).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(
@@ -69,6 +69,28 @@ configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, co
       const list = page.locator('ion-list');
       await expect(list).toHaveScreenshot(screenshot(`checkbox-long-label-in-item`));
     });
+    test('should render margins correctly when using long label in item with start alignment', async ({
+      page,
+    }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/29837',
+      });
+      await page.setContent(
+        `
+          <ion-list>
+            <ion-item>
+              <ion-checkbox justify="start" alignment="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');
+      await expect(list).toHaveScreenshot(screenshot(`checkbox-long-label-in-item-align-start`));
+    });
   });
 
   test.describe(title('checkbox: stacked label in item'), () => {

core/src/components/checkbox/test/item/index.html

@@ -181,6 +181,15 @@ <h1>Multiline Label</h1>
               </ion-checkbox>
             </ion-item>
           </div>
+          <div class="grid-item">
+            <ion-item>
+              <ion-checkbox justify="start" alignment="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>

core/src/components/checkbox/test/label/index.html

@@ -113,6 +113,24 @@ <h2>Align Center</h2>
             <ion-checkbox label-placement="stacked" alignment="center">Enable Notifications</ion-checkbox>
           </div>
         </div>
+
+        <h1>Multiline Label</h1>
+        <div class="grid">
+          <div class="grid-item">
+            <ion-checkbox justify="start">
+              <ion-label class="ion-text-wrap">
+                Enable Notifications Enable Notifications Enable Notifications
+              </ion-label>
+            </ion-checkbox>
+          </div>
+          <div class="grid-item">
+            <ion-checkbox justify="start" alignment="start">
+              <ion-label class="ion-text-wrap">
+                Enable Notifications Enable Notifications Enable Notifications
+              </ion-label>
+            </ion-checkbox>
+          </div>
+        </div>
       </ion-content>
     </ion-app>
   </body>