Home How do I include an aria-label on my IonCheckbox and still have the visible label render?

Questions

How do I include an aria-label on my IonCheckbox and still have the visible label render?

December 12, 2023

I’m using Ionic 7 and React 18. I have an IonCheckbox that I build like so

<IonItem>
  <IonLabel id="label1">Jeff Lebowski</IonLabel>
  <IonCheckbox value="123" checked={true} />
</IonItem>

This produces the accessibility warning

[Ionic Warning]: ion-checkbox now requires providing a label with 
either the default slot or the "aria-label" attribute. To migrate, 
remove any usage of "ion-label" and pass the label text to either 
the component or the "aria-label" attribute.

Example:

<ion-checkbox>Label</ion-checkbox>

Example with aria-label:

<ion-checkbox aria-label="Label"></ion-checkbox>

However, if I include an aria-label,

<IonItem>
  <IonLabel id="label1">Jeff Lebowski</IonLabel>
  <IonCheckbox value="123" checked={true} aria-label="Jeff Lebowski" />
</IonItem>

I can no longer see text next to my checkbox. THe example of this is here — https://stackblitz.com/edit/an5yjh-ef4kj7?file=src%2FApp.tsx,src%2Fcomponents%2FMyForm.tsx

>Solution :

<IonCheckbox value="123" checked={true}>
  Jeff Lebowski
</IonCheckbox>

seems to produce the desired outcome.

In more detail, providing an aria-label is not the same with providing a label. aria-label is not rendered, it’s used by screen readers to announce the checkbox. Whereas the slot contents (the children of <ion-checkbox />) are displayed as label.

The ion-label has been deprecated in favour of the two above. But each of them has its own separate purpose.

Note: if, for any reason, you want to use the old syntax, you can add legacy={true} to <ion-checkbox />, along with the ion-label attribute.