feat: stacked labels for form controls

[anddorua]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

Controls should be able to work with external labels. I.e. for any control sibling <label for="control-id">Text</label> might be attached and pressing on this label should apply focus on the control.

Describe the Use Case

Right now in v.7.0.1 I can't attach labels to the ion-checkbox elements to implement the following layout:

with this code:

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

Describe Preferred Solution

No response

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

[RRGT19]

@liamdebeasi
Any update on this feat? It would be really helpful. In fact, I'm waiting for this to finish our migration from v6 to v7.

[thetaPC]

Thanks for the issue! This has been implemented via PR #28075 and will be available in an upcoming minor release of Ionic.

[RRGT19]

Hi team, @thetaPC @liamdebeasi

Saw a new minor release (7.3.4) without this fix. A friendly reminder of this.

[liamdebeasi]

This is a feature, so it will be in a minor release of Ionic not a patch release as noted in #27229 (comment).

edit: Ionic 7.3.4 is a patch release since we changed the last digit (7.3.3 --> 7.3.4)

[ionitron-bot]

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.