@engie-group/fluid-design-system-angular/src/components/checkbox/checkbox.component.html

Fluid Design System Angular

<div class="nj-checkbox"
     [ngClass]="checkboxClasses"
     [attr.inert]="isPresentational ? 'true' : null">
  <label [attr.for]="inputId">
    <input
      type="checkbox"
      #input
      [indeterminate]="indeterminate"
      [required]="isRequired"
      [checked]="isChecked"
      [disabled]="isDisabled"
      [attr.id]="inputId"
      [attr.name]="name"
      [attr.aria-label]="ariaLabel"
      [attr.aria-labelledby]="ariaLabelledby"
      [attr.aria-invalid]="hasError ? 'true' : null"
      [attr.aria-describedby]="subscriptMessage || errorMessage ? getSubscriptId() : null"
      (change)="_onChangeEvent($event)"
      (click)="_onInputClick($event)">
    <ng-template [ngTemplateOutlet]="content"></ng-template>
  </label>
  <div *ngIf="subscriptMessage || errorMessage" class="nj-checkbox__subscript" [attr.id]="getSubscriptId()">
    <nj-icon *ngIf="hasError" variant="inherit" name="warning" size="sm"></nj-icon>
    <nj-icon *ngIf="hasSuccess && !hasError" variant="inherit" name="check" size="sm"></nj-icon>
    {{errorMessage ? errorMessage : subscriptMessage}}
  </div>
</div>

<ng-template #content>
  <span class="nj-checkbox__label">
    <ng-content></ng-content>
    <span *ngIf="isRequired" aria-hidden="true" class="nj-checkbox__required">
      *
    </span>
  </span>
</ng-template>