# Checkbox > Two-state checkbox. Standalone (boolean) or inside \ (array of values). Source: https://ngwr.dev/reference/components/checkbox Kind: Component, Standalone ## Installation ```angular-ts import { WrCheckbox, WrCheckboxGroup } from 'ngwr/checkbox'; import { FormsModule } from '@angular/forms'; @Component({ imports: [WrCheckbox, WrCheckboxGroup, FormsModule] }) export class MyComponent {} ``` ## Standalone Signal-forms native — bind the boolean `checked` model via `[(checked)]`, `[formField]`, or classic `[(ngModel)]`. ```html I agree ``` ## Inside a group The group manages an array of values. Each child contributes its value when checked. ```html Autosave Notifications Dark mode ``` ## Indeterminate A parent `[indeterminate]` shows the mixed state (a dash) when only some children are checked — the classic 'select all'. It's visual and controlled: you set it, and clear it on the next toggle. ```html Select all @for (p of permItems; track p) { {{ p }} } ``` ## Disabled ```html Disabled ``` ## Use it in a form Signal forms is the native path — `[formField]` binds the `checked` model directly. Reactive forms and `[(ngModel)]` go through [Angular 22's forms bridge](https://ngwr.dev/guides/forms), which binds a signal-forms control with no `ControlValueAccessor` involved: the library ships none, and `formControlName` still works. That bridge is not an accessor, and the guide is what it carries and what it drops — `updateOn`, `required`, and a `{ emitEvent: false }` write that never repaints. Mind which model each half binds, too: a single checkbox is a boolean, the group is the array of `checkboxValue`s. ```angular-html I agree
I agree to the terms Autosave Notifications
I agree ``` ```angular-ts 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(['autosave'], { nonNullable: true }), }); } ``` ## Checkbox API | Name | Description | Type | Default | | --- | --- | --- | --- | | `id` | Stable id used to associate the native input with its label. Lands on the inner ``; the host never keeps it. | `string` | `Randomly generated` | | `checkboxValue` | This checkbox's identity when inside a `` — the value added to / removed from the group's array. Ignored in standalone mode. (Named `checkboxValue`, not `value`, because `FormCheckboxControl` reserves `value`.) | `unknown` | `null` | | `ariaLabel` | Accessible name for a checkbox used WITHOUT projected text — a selection cell in a table, say. The wrapping `