[Fixed] Click on ion-label to toggle the ion-toggle


I am creating a page with ionic 5.

I am making a ‘remember me’ button with use of <ion-toggle>.

    <ion-label>remember me</ion-label>
    <ion-toggle class="button"></ion-toggle>

The Ion-toggle is working fine, but I can’t toggle it by clicking on the label next to it.

I have tried many solutions.

The link for the API documentation is: https://ionicframework.com/docs/api/toggle

Is there any way to make both the ion toggle and the text clickable?

I’m using ionic angular

Thanks in advance


This is how you can do:

  • add a Ionic id to the toggle with for example #mytoggle
  • use the id in the (click) of the label to toggle the .checked property


    <ion-label (click)="mytoggle.checked = !mytoggle.checked">remember me</ion-label>
    <ion-toggle #mytoggle class="button"></ion-toggle>

Try it in stackblitz

Leave a Reply

(*) Required, Your email will not be published