diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx
index abd289c2635..8abd04477de 100644
--- a/core/src/components/checkbox/checkbox.tsx
+++ b/core/src/components/checkbox/checkbox.tsx
@@ -1,5 +1,5 @@
import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Build, Component, Element, Event, Host, Method, Prop, State, h } from '@stencil/core';
+import { Build, Component, Element, Event, Host, Method, Prop, State, h, forceUpdate } from '@stencil/core';
import { checkInvalidState } from '@utils/forms';
import type { Attributes } from '@utils/helpers';
import { inheritAriaAttributes, renderHiddenInput } from '@utils/helpers';
@@ -265,6 +265,10 @@ export class Checkbox implements ComponentInterface {
ev.stopPropagation();
};
+ private onSlotChange = () => {
+ forceUpdate(this);
+ };
+
private getHintTextId(): string | undefined {
const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
@@ -382,7 +386,7 @@ export class Checkbox implements ComponentInterface {
id={this.inputLabelId}
onClick={this.onDivLabelClick}
>
-
+
{this.renderHintText()}
diff --git a/packages/angular/test/base/e2e/src/standalone/value-accessors.spec.ts b/packages/angular/test/base/e2e/src/standalone/value-accessors.spec.ts
index 44a85cadf14..dc4c7b92d4d 100644
--- a/packages/angular/test/base/e2e/src/standalone/value-accessors.spec.ts
+++ b/packages/angular/test/base/e2e/src/standalone/value-accessors.spec.ts
@@ -8,13 +8,19 @@ test.describe('Value Accessors', () => {
test('should update the form value', async ({ page }) => {
await expect(page.locator('#formValue')).toHaveText(JSON.stringify({ checkbox: false }, null, 2));
- await expect(page.locator('ion-checkbox')).toHaveClass(/ion-pristine/);
+ await expect(page.getByRole('checkbox', { name: 'Static Checkbox Label' })).toHaveClass(/ion-pristine/);
- await page.locator('ion-checkbox').click();
+ await page.getByRole('checkbox', { name: 'Static Checkbox Label' }).click();
await expect(page.locator('#formValue')).toHaveText(JSON.stringify({ checkbox: true }, null, 2));
- await expect(page.locator('ion-checkbox')).toHaveClass(/ion-dirty/);
- await expect(page.locator('ion-checkbox')).toHaveClass(/ion-valid/);
+ await expect(page.getByRole('checkbox', { name: 'Static Checkbox Label' })).toHaveClass(/ion-dirty/);
+ await expect(page.getByRole('checkbox', { name: 'Static Checkbox Label' })).toHaveClass(/ion-valid/);
+
+ await expect(page.getByRole('checkbox', { name: 'Static Checkbox Label' })).toBeVisible();
+ });
+
+ test('should display dynamically set label', async ({ page }) => {
+ await expect(page.getByRole('checkbox', { name: 'Dynamic Checkbox Label' })).toBeVisible();
});
});
diff --git a/packages/angular/test/base/src/app/standalone/value-accessors/checkbox/checkbox.component.html b/packages/angular/test/base/src/app/standalone/value-accessors/checkbox/checkbox.component.html
index c121dab37a7..0f264add5b8 100644
--- a/packages/angular/test/base/src/app/standalone/value-accessors/checkbox/checkbox.component.html
+++ b/packages/angular/test/base/src/app/standalone/value-accessors/checkbox/checkbox.component.html
@@ -6,6 +6,7 @@
IonCheckbox Value Accessors
- Checkbox
+ Static Checkbox Label
+
{{dynamicLabel}}
diff --git a/packages/angular/test/base/src/app/standalone/value-accessors/checkbox/checkbox.component.ts b/packages/angular/test/base/src/app/standalone/value-accessors/checkbox/checkbox.component.ts
index d58672d9549..edf8d16e375 100644
--- a/packages/angular/test/base/src/app/standalone/value-accessors/checkbox/checkbox.component.ts
+++ b/packages/angular/test/base/src/app/standalone/value-accessors/checkbox/checkbox.component.ts
@@ -15,6 +15,11 @@ import { ValueAccessorTestComponent } from "../value-accessor-test/value-accesso
]
})
export class CheckboxComponent {
+ dynamicLabel = '';
+
+ ngAfterViewInit(): void {
+ this.dynamicLabel = 'Dynamic Checkbox Label';
+ }
form = this.fb.group({
checkbox: [false, Validators.required],