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.
import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';

Examples

Basic usage of checkbox.

expand codeexpand code
Loading...

Communicated with other components.

expand codeexpand code
Loading...

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

expand codeexpand code
Loading...

Disabled checkbox.

expand codeexpand code
Loading...




Generate a group of checkboxes from an array.

expand codeexpand code
Loading...

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

expand codeexpand code
Loading...

API#

[nz-checkbox]#

PropertyDescriptionTypeDefault
[nzId]input id attribute inside the componentstring-
[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-wrapperany-
(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<any[]>-

Methods#

[nz-checkbox]#

NameDescription
focus()get focus
blur()remove focus