Use Version 7

Ionic Framework v7 introduces a simplification that will mean you can replace use of ion-label with a label property (and in some cases removing ion-item and ion-list as well).

This change also improves how a screen reader will announce the component by treating the label as as part of the form control.

Here are some examples of replacing Ionic v6 style markup for the newer v7 style:

ion-input

Before

<ion-item>
    <ion-label position="floating">Your Name</ion-label>
    <ion-input name="name" [(ngModel)]="name"></ion-input>
</ion-item>

We replace ion-label for the label property and use labelPlacement instead of position.

After

<ion-item>
    <ion-input label="Your Name" labelPlacement="floating" name="name" [(ngModel)]="name"></ion-input>
</ion-item>

ion-checkbox

Before

<ion-item>
   <ion-checkbox [(ngModel)]="terms" slot="start"></ion-checkbox>
   <ion-label>I agree to the terms and conditions</ion-label>
</ion-item>

Here labelPlacement of end ensures the label comes after the checkbox and justify to set to start makes the label left justified.

After

<ion-item>
    <ion-checkbox labelPlacement="end" justify="start" [(ngModel)]="terms">I agree to the terms and conditions</ion-checkbox>
</ion-item>

ion-textarea

Before

<ion-item>
   <ion-label>More Info</ion-label>
   <ion-textarea placeholder="Enter more information here..."></ion-textarea>    
</ion-item>

After

<ion-item>
   <ion-textarea label="More Info" placeholder="Enter more information here..."></ion-textarea>    
</ion-item>

ion-radio

Before

<ion-radio-group>
    <ion-list-header>
        <ion-label>Toppings</ion-label>
    </ion-list-header>    
    <ion-item>
        <ion-label>Sprinkles</ion-label>
        <ion-radio value="sprinkles"></ion-radio>
    </ion-item>

    <ion-item>
        <ion-label>Marshmallows</ion-label>
        <ion-radio value="marshmallows"></ion-radio>
    </ion-item>

    <ion-item>
        <ion-label>Cherries</ion-label>
        <ion-radio value="cherries"></ion-radio>
    </ion-item>
</ion-radio-group>

We replace each ion-label and place our label in the ion-radio.

After

<ion-radio-group>
   <ion-list-header>
      <ion-label>Toppings</ion-label>
   </ion-list-header>
   <ion-list>
      <ion-item>
         <ion-radio value="sprinkles">Sprinkles</ion-radio>
      </ion-item>

      <ion-item>
         <ion-radio value="marshmallows">Marshmallows</ion-radio>
      </ion-item>

      <ion-item>
         <ion-radio value="cherries">Cherries</ion-radio>
      </ion-item>
   </ion-list>
</ion-radio-group>

ion-toggle

Before

<ion-list>
  <ion-item>
    <ion-label>Checked Toggle</ion-label>
    <ion-toggle slot="end" [checked]="true"></ion-toggle>
  </ion-item>
</ion-list>

We replace ion-list and ion-item with a single ion-toggle:

After

<ion-toggle [checked]="true">Checked Toggle</ion-toggle>

ion-select

Before

<ion-item>
   <ion-label>Fruit</ion-label>
   <ion-select aria-label="fruit" placeholder="Select fruit">
      <ion-select-option value="apples">Apples</ion-select-option>
      <ion-select-option value="oranges">Oranges</ion-select-option>
      <ion-select-option value="bananas">Bananas</ion-select-option>
   </ion-select>
</ion-item>

We move the contents of ion-label into a label property on ion-select:

After

<ion-item>   
   <ion-select label="Fruit" aria-label="fruit" placeholder="Select fruit">
      <ion-select-option value="apples">Apples</ion-select-option>
      <ion-select-option value="oranges">Oranges</ion-select-option>
      <ion-select-option value="bananas">Bananas</ion-select-option>
   </ion-select>
</ion-item>