how to put p-checkbox label from PrimeNG on the left of the checkbox

Question

 <p-checkbox name="group1" [value]="true" label="Outsourcing"
                             style="margin: 0 25px"></p-checkbox>

On the default the labes is on the right of checkbox, how can I change it to be on the left?

Answer 1

You can achieve this by setting row-direction style property to row-reverse in p-checkbox element.

<p-checkbox 
  name="group1" 
  [value]="true" 
  label="Outsourcing" 
  style="margin: 0 25px; flex-direction: row-reverse">
</p-checkbox>

Working example: https://stackblitz.com/edit/angular-ivy-drzmxl?file=src/app/app.component.html