<div class="ui-checkbox" [ngClass]="{'ui-checkbox--invalid': uiInvalid && uiValidationMessage}">
  <digi-form-checkbox
    [afId]="uiId"
    [afIndeterminate]="uiIndeterminate"
    [afName]="uiName"
    [afRequired]="uiRequired"
    [afValidation]="uiInvalid ? 'error' : 'neutral'"
    [afVariation]="uiSecondary ? 'secondary' : 'primary'"
    [afLabel]="labelText"
    [afChecked]="currentValue"
    (afOnChange)="checkForChange($event.detail.target.checked)"
  ></digi-form-checkbox>
  <div aria-atomic="true" role="alert">
    <digi-form-validation-message *ngIf="uiInvalid && uiValidationMessage" af-variation="error"
      >{{uiValidationMessage}}</digi-form-validation-message
    >
  </div>
</div>
