ionic-frameworkionic7

Ionic 7 How do I change the space between checkbox and label for an ion-checkbox?

How do I change the space / margin / padding between the checkbox itself and the text label next to it in a ion-checkbox in Ionic7?

<ion-checkbox labelPlacement="end">Visa ålder</ion-checkbox>

There seems to be a shadow part label but I cannot change it.

Solution

  • Solution is to set margin-inline-start for the shadow part label. Put this in your scss file:

    ion-checkbox {

   &::part(label)
   {
      margin-inline-start: 5px;
   }
}