<div class="flex flex-col gap-2">
  <div class="flex items-center gap-3">
    <input
      [id]="name"
      type="checkbox"
      [name]="name"
      [disabled]="disabled"
      [checked]="checked"
      (change)="onChange($any($event.target).checked)"
      class="h-5 w-5 shrink-0 cursor-pointer rounded border border-surface-300 accent-primary disabled:cursor-not-allowed disabled:opacity-60"
    />
    <uikit-label [name]="name"> {{ label }} </uikit-label>
  </div>

  @if (hint) {
    <small [attr.id]="name + '-help'" class="text-muted-color">{{ hint }}</small>
  }
</div>
