Repository navigation
bug: ion-checkbox sometimes does not show label from variable #30632
Description
Prerequisites
- I have read the Contributing Guidelines.
- I agree to follow the Code of Conduct.
- 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
- Go to https://stackblitz.com/~/github.com/SandraCaci/test-case-ion-checkbox
- Wait until the app is started and you see "Demo of demo-test-input-checkbox"
- Notice that the 2nd checkbox does not show a label (the one with red text below it)
- Click on that checkbox and notice that the label appears.
- 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
Activity
sergiomilici commentedon Aug 15, 2025
I have the same issue using 8.7.2.
When clicking it, it updates the value.
SandraCaci commentedon Oct 21, 2025
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 commentedon Oct 22, 2025
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?
Fix RO-3078 - label not showing
SandraCaci commentedon Nov 26, 2025
Looking at the commit above that references this issue, jorgkv found a workaround: use ion-checkbox's ngModel and ngModelChange.
boubou158 commentedon Feb 26, 2026
Hi, any update on that? I am facing the same issue with 8.7.17.
brandyscarney commentedon Mar 25, 2026
Thank you for the issue! This has been fixed by #30980 and released in the
8.8.2release.SandraCaci commentedon Mar 30, 2026
The original bug seems to have been fixed at first glance, but now when you come to the page from a different page, none of the checkbox labels from variables show. I have updated the StackBlitz reproduction at https://stackblitz.com/~/github.com/SandraCaci/test-case-ion-checkbox to show that.
Steps to reproduce:
thetaPC commentedon Mar 30, 2026
@SandraCaci Thank you for the information! Please open a new issue so the team can triage it since this one has been closed.
SandraCaci commentedon Mar 31, 2026
Created new bug #31052
ionitron-bot commentedon Apr 30, 2026
Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.