@let poHelper = setHelper(label, additionalHelpTooltip);
<po-field-container
  [p-disabled]="disabled"
  [p-label]="label"
  [p-optional]="optional"
  [p-required]="required"
  [p-show-required]="showRequired"
  [p-helper]="label ? poHelper.helperSettings : undefined"
  [p-show-helper]="label ? displayAdditionalHelp : undefined"
  [p-size]="size"
  [p-text-wrap]="labelTextWrap()"
>
  <div role="group" class="po-checkbox-group-content" [attr.aria-label]="label" [attr.p-size]="size">
    <div class="po-field-container-content" [attr.name]="name" [attr.p-size]="size">
      <ul class="po-row">
        @for (option of checkboxGroupOptionsView; track trackByFn($index)) {
          <li
            class="po-checkbox-group-item po-md-{{ mdColumns }} po-lg-{{ columns }}"
            [class.po-checkbox-group-item-disabled]="option.disabled || disabled"
          >
            <po-checkbox
              #checkboxLabel
              [p-label]="option.label"
              [p-disabled]="option.disabled || disabled"
              (p-blur)="onBlur(checkboxLabel)"
              (click)="checkOption(option)"
              (keydown)="onKeyDown($event, option, checkboxLabel)"
              [p-checkboxValue]="checkedOptions[option.value] === null ? 'mixed' : checkedOptions[option.value]"
              [p-required]="required"
              [p-label-text-wrap]="true"
              [p-size]="size"
            >
            </po-checkbox>
          </li>
        }
      </ul>
    </div>
  </div>
  <po-field-container-bottom
    [p-append-in-body]="appendBox"
    [p-help]="help"
    [p-disabled]="disabled"
    [p-error-limit]="errorLimit"
    [p-error-pattern]="getErrorPattern()"
    [p-size]="size"
    [p-helper]="!label ? poHelper.helperSettings : undefined"
    [p-show-helper]="!label ? displayAdditionalHelp : undefined"
  ></po-field-container-bottom>
</po-field-container>