bug: ion-checkbox sometimes does not show label from variable

[SandraCaci]

Prerequisites

• [x] I have read the Contributing Guidelines.
• [x] I agree to follow the Code of Conduct.
• [x] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

Reproduced test case in StackBlitz

In https://stackblitz.com/~/github.com/SandraCaci/test-case-ion-checkbox you see an ion-checkbox based on an Angular form control, with default value false and label from a variable, which does not show the label when opening the page. It only shows the label when you check the box and then it remains. When you refresh the page or navigate to another page and come back, the label disappears again.

When does the bug not occur?

This does not happen if the form control is disabled, if the default value is true, or if the label is hardcoded in the html (see the other check boxes in the test case). The bug occurs with Ionic 8.6.6, 8.7.1 and 8.7.2, but not with Ionic 8.6.7 or 8.7.0. It seems related to the upgrade to @stencil/core 4.36.2 which was done in 8.6.6 (reverted in 8.6.7) and again done in 8.7.1, see https://github.com/ionic-team/ionic-framework/releases , because if I force the use of @stencil/core 4.33.1 with Ionic 8.7.2 the bug is not there.

Expected Behavior

The label should show immediately when opening the page. Now the users cannot see what is the purpose of the checkbox.

Steps to Reproduce

1. Go to https://stackblitz.com/~/github.com/SandraCaci/test-case-ion-checkbox
2. Wait until the app is started and you see "Demo of demo-test-input-checkbox"
3. Notice that the 2nd checkbox does not show a label (the one with red text below it)
4. Click on that checkbox and notice that the label appears.
5. Click the home icon in the upper left icon to go to the home page, and then the checkbox icon just below it to go back to the checkbox page, and note that the label of the 2nd checkbox has disappeared again.

Code Reproduction URL

https://github.com/SandraCaci/test-case-ion-checkbox

Ionic Info

Ionic:

Ionic CLI : 5.4.16

Utility:

cordova-res : not installed native-run : not installed

System:

NodeJS : v22.18.0 npm : 10.9.3 OS : Windows 10

Additional Information

No response

[sergiomilici]

I have the same issue using 8.7.2. When clicking it, it updates the value.

[SandraCaci]

I saw that @ionic/angular 8.7.7 uses a new stencil version (4.38.0) but it does not solve this bug. The bug still occurs in 8.7.7.

[madams-cutco]

Is there any update for this issue? I just tried with 8.7.7 and like the comment above stated it still occurs. I think I'm going to have to downgrade the ionic version as I have a lot of checkboxes in app. Would it have been better to not move to the modern syntax and just use an ion-label tag?

[SandraCaci]

Looking at the commit above that references this issue, jorgkv found a workaround: use ion-checkbox's ngModel and ngModelChange.