Ion-checkbox is not allowing interact with the label

Ionic Framework Ionic React
1

Hello!

I have been experimenting with version 7 of Ionic, specifically with the ion-checkbox component. In previous versions of Angular and Ionic, we were able to achieve the following behavior as an example:

image
image644×747 47.7 KB 

<IonItem>
  <IonCheckbox slot="start" onIonChange={handleChange} />
  <IonLabel>I agree to the <a onClick={handleTermsAndConditions}>terms and conditions</a></IonLabel>
</IonItem>

Due to the new structure, the behavior is no longer functional because the anchor or other element cannot be clicked on.

<IonCheckbox slot="start" onIonChange={handleChange} >
     I agree to the <a onClick={handleTermsAndConditions}>terms and conditions</a>
</IonCheckbox>

Do you have any suggestions on how to prevent the legacy method from being fully phased out?

2

I can show you my solution (in angular)

<div class="display__flex width__100 align__items__center padding__bottom__40">
   <p (click)="openTermsAndConditionsModal()" 
      class="ion-text-wrap padding__left__16 width__100"
      style="max-width: 80%" 
      [ngClass]="{'text__red': (!this.checkboxChecked)}">
      {{this.termsAndConditionsLabel}}
   </p>
   <ion-checkbox 
      aria-label="checkbox-pagamento" 
      slot="end"
     [(ngModel)]="checkboxTermsAndConditions" [checked]="false">
   </ion-checkbox>
</div>
3

The anchor is clickable in below code.

<ion-item>
        <ion-label id="ion-cb-0-lbl">Checkbox Label 
          <a (click)="handleTermsAndConditions()" style="cursor: pointer;">
            terms and conditions</a>         
        </ion-label>
        <ion-checkbox slot="start"  
        aria-labelledby="ion-cb-0-lbl"></ion-checkbox>
      </ion-item>

or as per ionic documentation

Using the Legacy Syntax

Ionic uses heuristics to detect if an app is using the modern checkbox syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the legacy property on ion-checkbox to true to force that instance of the checkbox to use the legacy syntax.