How to provide external label referenced to the ion-checkbox with the for attribute in ionic v7?

Ionic Framework Ionic Angular
1

I’m rendering labels for ionic checkboxes separately from the ion-checkbox, because they positioned above the element. Then I need to reference on appropriate checkbox from the respective label. And the attribute for doesn’t work. Any workarounds?

2

Are you using checkbox list ?? Share your code

3

You’ll need to add an aria-label to ion-checkbox in this case. However, having stacked labels for other form controls built-in might be nice to have. Could you file a feature request? Issues · ionic-team/ionic-framework · GitHub

4 
<div class="week-container" formGroupName="weekDays">
  <label
    *ngFor="let day of weekDays; let i = index"
    class="label"
    id="day{{ i }}-label"
    >{{ day }}</label
  >
  <ion-checkbox
    *ngFor="let control of dayArray.controls; let i = index"
    formControlName="{{ i }}"
    aria-labelledby="day{{ i }}-label"
  ></ion-checkbox>
</div>

week-container is grid
It looks following:
image

5

Thank you! I’ve made a feature request. Probably I use aria-label the wrong way, but I can’t make it work.

6

Check if it works

weekDays=[{name:'Su',value:false},
  {name:'Mo',checked:false},
  {name:'Tu',checked:false},
  {name:'We',checked:false},
  {name:'Th',checked:false},
  {name:'Fr',checked:false},
  {name:'Sa',checked:false},]

<ion-list > 
        <ion-grid>
          <ion-row>
            <ion-col size-lg="1" *ngFor="let day of weekDays; let i = index">
              <div>{{day.name}}</div>
              <ion-checkbox formControlName="days"
              justify="start"  (ionChange)="onDaySelect(day)"
              [(ngModel)]="day.checked"></ion-checkbox>
            </ion-col>
          </ion-row>
        </ion-grid> 
    </ion-list>

onDaySelect(day:any)
  {
    if(day && day.checked==true)      
        console.log(day)
    
  }
7

To provide an external label for an ion-checkbox in Ionic v7 using the for attribute, you can do the following:

Add a unique id attribute to the ion-checkbox element. This ID will be used to reference the checkbox in the external label.
html
Copy code

Add a label element outside the ion-checkbox element and use the for attribute to reference the id of the checkbox. You can also add text or other elements inside the label element.
html
Copy code
Check this box
Style the label element as desired using CSS.
css
Copy code
label {
display: inline-block;
margin-left: 10px;
}
The final code will look like this:

html
Copy code

Checkbox

Check this box
This will create an external label that is associated with the ion-checkbox using the for attribute. When the label is clicked, it will toggle the checkbox.

8

Thank you! Of course, it renders the needed layout. The problem is that the desired behavior is when you click the label the appropriate checkbox should be triggered. This is standard expected behavior for the checkbox labels, usually done by providing a unique ID to the checkbox and setting attribute for to the label.

9

Add a unique id attribute to the ion-checkbox element. This ID will be used to reference the checkbox in the external label.

Thank you! Exactly this point does not work.