Checkbox

Collect user's choices.

Import

Source

Docs

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.

Checkbox

Basic usage of checkbox.

      Loading...

Checked - Enabled

Communicated with other components.

      Loading...

Check all

Apple Pear Orange

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

      Loading...

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

⚠️ nz-checkbox-wrapper is deprecated, we recommend using nz-checkbox-group.

      Loading...

Disabled checkbox.

      Loading...

Property	Description	Type	Default
`[nzId]`	input id attribute inside the component	`string`	-
`[nzName]`	input name attribute inside the component	`string`	-
`[nzAutoFocus]`	get focus when component mounted	`boolean`	`false`
`[nzDisabled]`	Disable checkbox	`boolean`	`false`
`[ngModel]`	Specifies whether the checkbox is selected, double binding	`boolean`	`false`
`[nzIndeterminate]`	set the status of indeterminate，only affect the style	`boolean`	`false`
`[nzValue]`	use for the callback of `nz-checkbox-wrapper`	`any`	-
`(ngModelChange)`	The callback function that is triggered when the state changes.	`EventEmitter<boolean>`	-

Property	Description	Type	Default
`[ngModel]`	Specifies options, double binding	`string[] \| number[]`	`[]`
`[nzName]`	The `name` property of all input children	`string`	-
`[nzOptions]`	Specifies options	`string[] \| number[] \| NzCheckboxOption[]`	`[]`
`[nzDisabled]`	Disable all checkboxes	`boolean`	`false`
`(ngModelChange)`	The callback function that is triggered when the state changes.	`EventEmitter<string[] \| number[]>`	-

Property	Description	Type	Default
`(nzOnChange)`	The callback function that is triggered when the state changes.	`EventEmitter<any[]>`	-

Name	Description
`focus()`	get focus
`blur()`	remove focus

export interface NzCheckboxOption {
  label: string;
  value: string | number;
  disabled?: boolean;
}