Switch

Switching Selector.

When To Use#

  • If you need to represent the switching between two states or on-off state.
  • The difference between Switch and Checkbox is that Switch will trigger a state change directly when you toggle it, while Checkbox is generally used for state marking, which should work in conjunction with submit operation.
import { NzSwitchModule } from 'ng-zorro-antd/switch';

Examples

The most basic usage.

expand codeexpand code
      Loading...
    




With text and icon.

expand codeexpand code
      Loading...
    


Mark a pending state of switch.

expand codeexpand code
      Loading...
    


Disabled state of Switch.

expand codeexpand code
      Loading...
    


nzSize="small" represents a small sized switch.

expand codeexpand code
      Loading...
    

The status of Switch is completely up to the user and no longer automatically changes the data based on the click event.

expand codeexpand code
      Loading...
    

API#

nz-switch#

PropertyDescriptionTypeDefaultGlobal Config
[nzId]button id attribute inside the componentstring-
[ngModel]determine whether the nz-switch is checked, double bindingbooleanfalse
[nzCheckedChildren]content to be shown when the state is checkedstring | TemplateRef<void>-
[nzUnCheckedChildren]content to be shown when the state is uncheckedstring | TemplateRef<void>-
[nzDisabled]Disable switchbooleanfalse
[nzSize]the size of the nz-switch, options: defaultsmall'small' | 'default''default'
[nzLoading]loading state of switchbooleanfalse
[nzControl]determine whether fully control state by userbooleanfalse
(ngModelChange)a callback function, can be executed when the checked state is changingEventEmitter<boolean>-

Methods#

NameDescription
focus()get focus
blur()remove focus