Checkbox

<div class="checkbox-group">
  <h3>Select features</h3>
  <flx-checkbox
    label="Email notifications"
    [(ngModel)]="features.email">
  </flx-checkbox>
  <flx-checkbox
    label="SMS notifications"
    [(ngModel)]="features.sms">
  </flx-checkbox>
  <flx-checkbox
    label="Push notifications"
    [(ngModel)]="features.push">
  </flx-checkbox>
</div>

export class NotificationSettings {
  features = {
    email: false,
    sms: false,
    push: true
  };
}

<flx-checkbox
  label="Select all"
  [checked]="allSelected"
  [indeterminate]="someSelected"
  (checkedChange)="toggleAll($event)">
</flx-checkbox>

<div class="checkbox-list">
  <flx-checkbox
    *ngFor="let item of items"
    [label]="item.name"
    [(ngModel)]="item.selected"
    (checkedChange)="updateSelectAll()">
  </flx-checkbox>
</div>

export class SelectableList {
  items = [
    { name: 'Item 1', selected: false },
    { name: 'Item 2', selected: false },
    { name: 'Item 3', selected: false }
  ];

  get allSelected(): boolean {
    return this.items.every(item => item.selected);
  }

  get someSelected(): boolean {
    const selected = this.items.filter(item => item.selected).length;
    return selected > 0 && selected < this.items.length;
  }

  toggleAll(checked: boolean) {
    this.items.forEach(item => item.selected = checked);
  }

  updateSelectAll() {
    // Automatically updates based on getters
  }
}

<form [formGroup]="preferencesForm">
  <flx-checkbox
    label="Marketing emails"
    formControlName="marketingEmails">
  </flx-checkbox>

  <flx-checkbox
    label="Product updates"
    formControlName="productUpdates">
  </flx-checkbox>

  <flx-checkbox
    label="Terms acceptance"
    formControlName="acceptTerms"
    [required]="true"
    [error]="acceptTermsControl.invalid && acceptTermsControl.touched">
  </flx-checkbox>
</form>

import { FormBuilder, Validators } from '@angular/forms';

export class PreferencesComponent {
  preferencesForm = this.fb.group({
    marketingEmails: [false],
    productUpdates: [true],
    acceptTerms: [false, Validators.requiredTrue]
  });

  get acceptTermsControl() { return this.preferencesForm.get('acceptTerms')!; }

  constructor(private fb: FormBuilder) {}
}