Checkbox

Checkbox.

When To Use#

  • Used for selecting multiple values from several options.
  • If you use only one checkbox, it is the same as using Switch to toggle between two states. The difference is that Switch will trigger the state change directly, but Checkbox just marks the state as changed and this needs to be submitted.

Examples

Basic usage of checkbox.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-checkbox-basic',
  template: `
    <label nz-checkbox [(ngModel)]="checked">Checkbox</label>
  `
})
export class NzDemoCheckboxBasicComponent {
  checked = true;
}

Communicated with other components.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-checkbox-controller',
  template: `
    <p style="margin-bottom: 20px;">
      <label nz-checkbox [(ngModel)]="isCheckedButton" [nzDisabled]="isDisabledButton">
        {{ isCheckedButton ? 'Checked' : 'Unchecked' }} - {{ isDisabledButton ? 'Disabled' : 'Enabled' }}
      </label>
    </p>
    <p>
      <button nz-button [nzType]="'primary'" (click)="checkButton()" [nzSize]="'small'">
        {{ !isCheckedButton ? 'Checked' : 'Unchecked' }}
      </button>
      <button nz-button [nzType]="'primary'" (click)="disableButton()" [nzSize]="'small'">
        {{ isDisabledButton ? 'Enabled' : 'Disabled' }}
      </button>
    </p>
  `,
  styles: [
    `
      button {
        margin-right: 8px;
      }
    `
  ]
})
export class NzDemoCheckboxControllerComponent {
  isCheckedButton = true;
  isDisabledButton = false;

  checkButton(): void {
    this.isCheckedButton = !this.isCheckedButton;
  }

  disableButton(): void {
    this.isDisabledButton = !this.isDisabledButton;
  }
}

The nzIndeterminate property can help you to achieve a 'check all' effect.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-checkbox-check-all',
  template: `
    <div style="border-bottom: 1px solid rgb(233, 233, 233);">
      <label
        nz-checkbox
        [(ngModel)]="allChecked"
        (ngModelChange)="updateAllChecked()"
        [nzIndeterminate]="indeterminate"
      >
        Check all
      </label>
    </div>
    <br />
    <nz-checkbox-group [(ngModel)]="checkOptionsOne" (ngModelChange)="updateSingleChecked()"></nz-checkbox-group>
  `
})
export class NzDemoCheckboxCheckAllComponent {
  allChecked = false;
  indeterminate = true;
  checkOptionsOne = [
    { label: 'Apple', value: 'Apple', checked: true },
    { label: 'Pear', value: 'Pear', checked: false },
    { label: 'Orange', value: 'Orange', checked: false }
  ];

  updateAllChecked(): void {
    this.indeterminate = false;
    if (this.allChecked) {
      this.checkOptionsOne = this.checkOptionsOne.map(item => {
        return {
          ...item,
          checked: true
        };
      });
    } else {
      this.checkOptionsOne = this.checkOptionsOne.map(item => {
        return {
          ...item,
          checked: false
        };
      });
    }
  }

  updateSingleChecked(): void {
    if (this.checkOptionsOne.every(item => item.checked === false)) {
      this.allChecked = false;
      this.indeterminate = false;
    } else if (this.checkOptionsOne.every(item => item.checked === true)) {
      this.allChecked = true;
      this.indeterminate = false;
    } else {
      this.indeterminate = true;
    }
  }
}

Disabled checkbox.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-checkbox-disabled',
  template: `
    <label nz-checkbox nzDisabled [ngModel]="false"></label>
    <br />
    <label nz-checkbox nzDisabled [ngModel]="true"></label>
  `
})
export class NzDemoCheckboxDisabledComponent {}




Generate a group of checkboxes from an array.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-checkbox-group',
  template: `
    <nz-checkbox-group [(ngModel)]="checkOptionsOne" (ngModelChange)="log(checkOptionsOne)"></nz-checkbox-group>
    <br />
    <br />
    <nz-checkbox-group [(ngModel)]="checkOptionsTwo" (ngModelChange)="log(checkOptionsTwo)"></nz-checkbox-group>
    <br />
    <br />
    <nz-checkbox-group [(ngModel)]="checkOptionsThree" (ngModelChange)="log(checkOptionsThree)"></nz-checkbox-group>
  `
})
export class NzDemoCheckboxGroupComponent {
  checkOptionsOne = [
    { label: 'Apple', value: 'Apple', checked: true },
    { label: 'Pear', value: 'Pear' },
    { label: 'Orange', value: 'Orange' }
  ];
  checkOptionsTwo = [
    { label: 'Apple', value: 'Apple' },
    { label: 'Pear', value: 'Pear', checked: true },
    { label: 'Orange', value: 'Orange' }
  ];
  checkOptionsThree = [
    { label: 'Apple', value: 'Apple', disabled: true, checked: true },
    { label: 'Pear', value: 'Pear', disabled: true },
    { label: 'Orange', value: 'Orange' }
  ];

  log(value: object[]): void {
    console.log(value);
  }
}

We can use nz-checkbox and Grid in nz-checkbox-wrapper, to implement complex layout.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-checkbox-layout',
  template: `
    <nz-checkbox-wrapper style="width: 100%;" (nzOnChange)="log($event)">
      <div nz-row>
        <div nz-col nzSpan="8"><label nz-checkbox nzValue="A" [ngModel]="true">A</label></div>
        <div nz-col nzSpan="8"><label nz-checkbox nzValue="B">B</label></div>
        <div nz-col nzSpan="8"><label nz-checkbox nzValue="C">C</label></div>
        <div nz-col nzSpan="8"><label nz-checkbox nzValue="D">D</label></div>
        <div nz-col nzSpan="8"><label nz-checkbox nzValue="E">E</label></div>
      </div>
    </nz-checkbox-wrapper>
  `
})
export class NzDemoCheckboxLayoutComponent {
  log(value: string[]): void {
    console.log(value);
  }
}

API#

Import this Component Individually#

You can get more detail here.

import { NzCheckboxModule } from 'ng-zorro-antd';

[nz-checkbox]#

PropertyDescriptionTypeDefault
[nzAutoFocus]get focus when component mountedbooleanfalse
[nzDisabled]Disable checkboxbooleanfalse
[ngModel]Specifies whether the checkbox is selected, double bindingbooleanfalse
[nzIndeterminate]set the status of indeterminate,only affect the stylebooleanfalse
[nzValue]use for the callback of nz-checkbox-wrapperstring-
(ngModelChange)The callback function that is triggered when the state changes.EventEmitter<boolean>-

nz-checkbox-group#

PropertyDescriptionTypeDefault
[ngModel]Specifies options, double bindingArray<{ label: string; value: string; checked?: boolean; }>[]
[nzDisabled]Disable all checkboxesbooleanfalse
(ngModelChange)The callback function that is triggered when the state changes.EventEmitter<Array<{ label: string; value: string; checked?: boolean; }>>-

nz-checkbox-wrapper#

PropertyDescriptionTypeDefault
(nzOnChange)The callback function that is triggered when the state changes.EventEmitter<string[]>-

Methods#

[nz-checkbox]#

NameDescription
focus()get focus
blur()remove focus