Checkbox

Angular Material Checkbox allows users to select one or more options from a set, commonly used in forms and settings. A checkbox is either empty, ticked or mixed, it can be disabled in any of those three states, and its label can sit on either side of the box. BuilderKit restyles the box, the checkmark and the label so the mat-checkbox component matches the rest of the design system.

When only one option out of the set may be picked, use the radio button component instead.

Example

Below is an example of how BuilderKit restyles the Angular Material Checkbox and gives it a more modern appearance.

<mat-checkbox>Checkbox</mat-checkbox>

<mat-checkbox checked>Checked</mat-checkbox>

<mat-checkbox indeterminate>Indeterminate</mat-checkbox>

Select all with an indeterminate checkbox

The checkbox at the top is ticked when every option below it is ticked, empty when none of them are, and shows a dash for everything in between.

<mat-checkbox
  [checked]="allChecked()"
  [indeterminate]="someChecked()"
  (change)="toggleAll($event.checked)"
>
  All notifications
</mat-checkbox>

@for (item of notifications(); track item.label) {
  <mat-checkbox [checked]="item.checked" (change)="toggleOne(item.label, $event.checked)">
    {{ item.label }}
  </mat-checkbox>
}

Label before the checkbox

The label can be moved to the left of the box, which lines the boxes up along the right edge of a settings list.

<mat-checkbox labelPosition="before" checked>Remember me</mat-checkbox>