Checkbox

import { Component } from '@angular/core';
import { WrCheckbox, WrCheckboxGroup } from 'ngwr/checkbox';

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

I agree to the terms

Value: true

<wr-checkbox [(checked)]="agree">I agree</wr-checkbox>

Autosave

Notifications

Dark mode

Value: [autosave]

<wr-checkbox-group [(value)]="features">
  <wr-checkbox checkboxValue="autosave">Autosave</wr-checkbox>
  <wr-checkbox checkboxValue="notifications">Notifications</wr-checkbox>
  <wr-checkbox checkboxValue="darkmode">Dark mode</wr-checkbox>
</wr-checkbox-group>

Select all

read

write

delete

<wr-checkbox [checked]="allChecked()" (checkedChange)="toggleAll()" [indeterminate]="someChecked()">
  Select all
</wr-checkbox>
@for (p of permItems; track p) {
  <wr-checkbox [checked]="perms().includes(p)" (checkedChange)="togglePerm(p)">{{ p }}</wr-checkbox>
}

<wr-checkbox size="sm" [(checked)]="agree">Small</wr-checkbox>
<wr-checkbox size="lg" [(checked)]="agree">Large</wr-checkbox>

Disabled

Disabled (checked)

Read-only

Read-only (checked)

<wr-checkbox [disabled]="true">Disabled</wr-checkbox>
<wr-checkbox [readonly]="true">Read-only</wr-checkbox>

<!-- Signal Forms -->
<wr-checkbox [formField]="form.agree">I agree</wr-checkbox>

<!-- Reactive forms -->
<form [formGroup]="form">
  <wr-checkbox formControlName="agree">I agree to the terms</wr-checkbox>
  <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 -->
<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 }),
  });
}

Name	Description	Type	Default
`id`	Stable id used to associate the native input with its label. Lands on the inner `<input>`; the host never keeps it.	`string`	`Randomly generated`
`checkboxValue`	This checkbox's identity when inside a `<wr-checkbox-group>` — 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 `<label>` names the control whenever content is projected; with none, the native input has no name, and an `aria-label` put on the host lands on a `<wr-checkbox>` element that no screen reader ever announces.	`string \| null`	`null`
`ariaLabelledby`	Ids of the elements that name this checkbox, space-separated, for a box whose name is already on screen somewhere else — a table row's label cell, say, joined to an action word. Lands on the inner `<input>` as `aria-labelledby`, which wins over `ariaLabel` and over projected text. The ids have to resolve in the same document; one that matches nothing is skipped, and with none left the box falls back to `ariaLabel`.	`string \| null`	`null`
`checked`	Checked state — the form value. Bound by `[formField]`, two-way via `[(checked)]`, or `[(ngModel)]`. Ignored inside a `<wr-checkbox-group>`, where the group's array is the source of truth.	`boolean`	`false`
`(touch)`	Emitted on blur so a bound field can mark itself touched.	`void`	—
`disabled`	Disable the checkbox. Bound automatically from the field's disabled state when used with `[formField]`.	`boolean`	`false`
`readonly`	Refuse edits while staying focusable and submittable. Bound automatically from the field's readonly state when used with `[formField]`. A native `<input type="checkbox">` ignores the `readonly` attribute, so this cancels the click's activation behaviour instead — which covers Space too, since a checkbox turns Space into a click — and mirrors the state as `aria-readonly`, which role `checkbox` supports.	`boolean`	`false`
`size`	Control size — shares the `--wr-control-*` contract.	`WrCheckboxSize`	`'md'`
`icon`	Optional icon name rendered inside the box when checked, in place of the default checkmark. Use any registered NGWR icon.	`WrIconName \| null`	`null`
`indeterminate`	Show the indeterminate ("mixed") state — a dash instead of a check. Visual only and controlled: set it yourself for a parent "select all" whose children are partly checked, and clear it on the next toggle. Takes visual precedence over `checked`; the native input reports `aria-checked="mixed"`. A click the host does not answer still toggles `checked` underneath, and the dash and the mixed state both stay until the binding turns `false`.	`boolean`	`false`

Name	Description	Type	Default
`disabled`	Disable every child checkbox. Bound automatically from the field's disabled state when used with `[formField]`.	`boolean`	`false`
`readonly`	Refuse edits on every child while they stay focusable and the value still submits. Bound automatically from the field's readonly state when used with `[formField]`. No `aria-readonly` on the host: role `group` does not support it (the state is not global), so each child box mirrors its own instead.	`boolean`	`false`
`value`	The checked items' values. Bound by `[formField]`, or two-way via `[(value)]`.	`unknown[]`	`[]`
`(touch)`	Emitted when a child toggles so a bound field can mark itself touched.	`void`	—

Variable	Default	Declared on
`--wr-checkbox-bg`	`var(--wr-color-surface)`	`.wr-checkbox` +2 variant overrides
`--wr-checkbox-border`	`var(--wr-border-base)`	`.wr-checkbox` +3 variant overrides
`--wr-checkbox-color`	`var(--wr-color-on-surface)`	`.wr-checkbox` +1 variant override
`--wr-checkbox-font-family`	`var(--wr-font-family-base)`	`.wr-checkbox`
`--wr-checkbox-font-size`	`var(--wr-text-sm)`	`.wr-checkbox` +2 variant overrides
`--wr-checkbox-group-gap`	`var(--wr-space-sm)`	`.wr-checkbox-group`
`--wr-checkbox-label-gap`	`var(--wr-space-sm)`	`.wr-checkbox`
`--wr-checkbox-line-height`	`var(--wr-control-line-height-md)`	`.wr-checkbox` +2 variant overrides
`--wr-checkbox-mark`	`transparent`	`.wr-checkbox` +2 variant overrides
`--wr-checkbox-radius`	`var(--wr-control-radius-md)`	`.wr-checkbox` +2 variant overrides
`--wr-checkbox-size`	`1.125rem`	`.wr-checkbox` +2 variant overrides

Built on	Form, Icon
Used by	Schema Form, Table, Transfer

Installation

Standalone

Inside a group

Indeterminate

Sizes

Disabled and read-only

Use it in a form

Checkbox API

Checkbox Group API

CSS variables

Dependencies

See also