diff --git a/core/src/components/checkbox/checkbox.scss b/core/src/components/checkbox/checkbox.scss
index 73d643777a1..ccfe42c863c 100644
--- a/core/src/components/checkbox/checkbox.scss
+++ b/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);
}
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts b/core/src/components/checkbox/test/item/checkbox.e2e.ts
index 220d8332b11..5f9f78ab8b5 100644
--- a/core/src/components/checkbox/test/item/checkbox.e2e.ts
+++ b/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(
+ `
+
+
+
+ Enable Notifications Enable Notifications Enable Notifications
+
+
+
+ `,
+ 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'), () => {
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-align-start-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-align-start-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..2827fa674aa
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-align-start-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-align-start-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-align-start-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..9e7cdfbb748
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-align-start-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-align-start-ios-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-align-start-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..38779ba2fa6
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-align-start-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-align-start-md-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-align-start-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..bc4950a8f3a
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-align-start-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-align-start-md-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-align-start-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..d00491b631e
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-align-start-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-align-start-md-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-align-start-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..4ebcedcdf22
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-align-start-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..b173f84108b
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..61d5c272f0c
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-ios-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..dfc7039b005
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-stacked-label-in-item-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-stacked-label-in-item-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..eb4f8184a08
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-stacked-label-in-item-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-stacked-label-in-item-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-stacked-label-in-item-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..7b3edcd67cb
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-stacked-label-in-item-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-stacked-label-in-item-ios-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-stacked-label-in-item-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..122e52d2267
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-stacked-label-in-item-ios-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 0d8b8ca18cd..43d2cd640d3 100644
--- a/core/src/components/checkbox/test/item/index.html
+++ b/core/src/components/checkbox/test/item/index.html
@@ -181,6 +181,15 @@
Multiline Label
+
+
+
+
+ Enable Notifications Enable Notifications Enable Notifications
+
+
+
+
diff --git a/core/src/components/checkbox/test/label/index.html b/core/src/components/checkbox/test/label/index.html
index 1976816662f..213c7289f32 100644
--- a/core/src/components/checkbox/test/label/index.html
+++ b/core/src/components/checkbox/test/label/index.html
@@ -113,6 +113,24 @@ Align Center
Enable Notifications
+
+ Multiline Label
+
+
+
+
+ Enable Notifications Enable Notifications Enable Notifications
+
+
+
+
+
+
+ Enable Notifications Enable Notifications Enable Notifications
+
+
+
+