Checkbox

import { BuiCheckbox } from 'ng-blatui';

<button buiCheckbox [(checked)]="accepted" aria-labelledby="t"></button>
<span id="t">Accept terms and conditions</span>

<button buiCheckbox [checked]="true" aria-labelledby="t"></button>
<div>
  <span id="t" class="font-medium">Accept terms and conditions</span>
  <p class="text-muted-foreground text-sm">You agree to our Terms of Service.</p>
</div>

<button buiCheckbox [checked]="true" aria-label="Recents"></button>
<button buiCheckbox [checked]="true" aria-label="Home"></button>
<button buiCheckbox aria-label="Applications"></button>

<!-- override the checked colour via data-state -->
<button buiCheckbox [checked]="true" class="data-[state=checked]:bg-success data-[state=checked]:border-success"></button>

<button buiCheckbox class="rounded-full"></button>
<button buiCheckbox [checked]="true" class="rounded-full"></button>

<button buiCheckbox [indeterminate]="true" aria-label="Select all"></button>

<button buiCheckbox [disabled]="true" aria-label="Off"></button>
<button buiCheckbox [checked]="true" [disabled]="true" aria-label="On"></button>

<label class="flex items-center gap-2 text-sm">
  <input type="checkbox" class="size-4" /> Native checkbox
</label>

<!-- a native input tinted with the theme primary -->
<input type="checkbox" class="size-4 rounded border border-input" style="accent-color: var(--primary)" />

<!-- ControlValueAccessor: works with formControl / ngModel / signal forms -->
<button buiCheckbox [formControl]="terms" aria-label="Accept terms"></button>
// terms = new FormControl(false)