Switch

A toggle for an on/off setting.

Airplane mode

import { BuiSwitch } from 'ng-blatui';

<button buiSwitch [(checked)]="enabled" aria-labelledby="l"></button>
<span id="l">Airplane mode</span>

Sizes

<button buiSwitch size="sm" [checked]="true" aria-label="Small"></button>
<button buiSwitch [checked]="true" aria-label="Default"></button>
<button buiSwitch size="lg" [checked]="true" aria-label="Large"></button>

Colors

<!-- override the checked colour via data-state -->
<button buiSwitch [checked]="true" class="data-[state=checked]:bg-green-600"></button>

With text

Marketing emails

Receive emails about new products and features.

<div class="flex items-center justify-between rounded-lg border p-4">
  <div>
    <p id="m" class="font-medium">Marketing emails</p>
    <p class="text-muted-foreground text-sm">Receive product news.</p>
  </div>
  <button buiSwitch [checked]="true" aria-labelledby="m"></button>
</div>

Settings

Two-factor authentication

Activity digest

Product updates

<div class="flex items-center justify-between gap-4">
  <span id="s">Two-factor authentication</span>
  <button buiSwitch [checked]="true" aria-labelledby="s"></button>
</div>

Disabled

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

With icons

<!-- iconOn/iconOff (SVG path d) render inside the thumb -->
<button buiSwitch size="lg" [(checked)]="dark" iconOn="M12 3a6 6 0 0 0 9 9…" iconOff="M12 8a4 4 0 1 0 0 8…"></button>

Reactive form

Notifications — value: true

<!-- ControlValueAccessor: works with formControl / ngModel / signal forms -->
<button buiSwitch [formControl]="notify" aria-label="Notifications"></button>
// notify = new FormControl(true)