Checkbox

import { WrCheckbox, WrCheckboxGroup } from 'ngwr/checkbox';
import { FormsModule } from '@angular/forms';

@Component({ imports: [WrCheckbox, WrCheckboxGroup, FormsModule] })
export class MyComponent {}

<!-- Signal forms — the native path. -->
<wr-checkbox [formField]="form.agree">I agree</wr-checkbox>

<!-- Reactive forms. A single <wr-checkbox> is a FormCheckboxControl, so the
     control it binds holds a BOOLEAN — the checkbox's `checked` model, not
     `checkboxValue` (which is group identity and stays out of forms). -->
<form [formGroup]="form">
  <wr-checkbox formControlName="agree">I agree to the terms</wr-checkbox>

  <!-- A <wr-checkbox-group> is a FormValueControl<unknown[]>, so ITS control
       holds the array of checked `checkboxValue`s. -->
  <wr-checkbox-group formControlName="features">
    <wr-checkbox checkboxValue="autosave">Autosave</wr-checkbox>
    <wr-checkbox checkboxValue="notifications">Notifications</wr-checkbox>
  </wr-checkbox-group>
</form>

<!-- Template-driven — the same bridge. -->
<wr-checkbox [(ngModel)]="agree" name="agree">I agree</wr-checkbox>

import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';

import { WrCheckbox, WrCheckboxGroup } from 'ngwr/checkbox';

@Component({
  imports: [ReactiveFormsModule, WrCheckbox, WrCheckboxGroup],
  templateUrl: './my.html',
})
export class MyComponent {
  protected readonly form = new FormGroup({
    agree: new FormControl(false, { nonNullable: true, validators: [Validators.requiredTrue] }),
    features: new FormControl<string[]>(['autosave'], { nonNullable: true }),
  });
}