Select

Select component to select value from options.

When To Use#

  • A dropdown menu for displaying choices - an elegant alternative to the native <select> element.
  • Utilizing Radio is recommended when there are fewer total options (less than 5).
import { NzSelectModule } from 'ng-zorro-antd/select';

Examples

LucyLucyLucyLucy

Basic Usage.

expand codeexpand code
Loading...
a10
c12
 

Multiple selection, selecting from existing items, max 3 option will display at the same time by nzMaxTagCount.

expand codeexpand code
Loading...
 Tag Mode

Select with tags, transform input to tag (scroll the menu)

expand codeexpand code
Loading...
ZhejiangHangzhou

Coordinating the selection of provinces and cities is a common use case and demonstrates how selection can be coordinated.

Using the Cascader component is strongly recommended instead as it is more flexible and capable.

expand codeexpand code
Loading...

The selected option's age is 22


Jack

The value of ngModel comes from the nzValue of nz-option, when the nzValue of nz-option is an object, the ngModel will be an object too, the usage of compareWith is the same as SelectControlValueAccessor.

expand codeexpand code
Loading...
 Select users

A complete multiple select sample with remote search, debounce fetch, ajax callback order flow, and loading state.

expand codeexpand code
Loading...
 Inserted are removed

Hide already selected options in the dropdown via nzHide.

expand codeexpand code
Loading...
Select users

Load data on scroll.

expand codeexpand code
Loading...
a10
c12
 

With the help of virtual scroll, select component can deal with Large amounts of data.

expand codeexpand code
Loading...
Select OS

 Select OS

Custom the content of nz-select via nzCustomTemplate.

expand codeexpand code
Loading...

Add status to Select with nzStatus, which could be error or warning.

expand codeexpand code
Loading...
a10
c12
 
2 / 3

You can set the nzMaxMultipleCount prop to control the max number of items can be selected. When the limit is exceeded, the options will become disabled.

expand codeexpand code
Loading...


a10

a10

a10
c12
 


a10
c12
tag
 

The height of the input field for the select defaults to 32px. If nzSize is set to large, the height will be 40px, and if set to small, 24px.

expand codeexpand code
Loading...
Lucy

Using nz-option-group to group the options.

expand codeexpand code
Loading...
 automatic tokenization

Try to copy Lucy,Jack to the input. Only available in tags and multiple mode.

expand codeexpand code
Loading...
custom dropdown render

Customize the dropdown menu via nzDropdownRender.

expand codeexpand code
Loading...
Select OS

Custom the content of nz-option via nzCustomContent.

expand codeexpand code
Loading...
Default 01
Default 02
 


Default Value

Display a default value that not in the option list with nzHide in nz-option

expand codeexpand code
Loading...
LucyLucy

Bordered-less style component.

expand codeexpand code
Loading...
LucyLucy

Pass all options via nzOptions

expand codeexpand code
Loading...


HangZhou #310000

You can manually specify the position of the popup via placement.

expand codeexpand code
Loading...

API#

<nz-select>
  <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
</nz-select>

nz-select#

PropertyDescriptionTypeDefaultGlobal Config
[nzId]input id attribute inside the componentstring-
[ngModel]Current selected nz-option value, double binding.any | any[]-
[compareWith]Same as SelectControlValueAccessor(o1: any, o2: any) => boolean(o1: any, o2: any) => o1===o2
[nzAutoClearSearchValue]Whether the current search will be cleared on selecting an item. Only applies when mode is set to multiple or tags.booleantrue
[nzAllowClear]Show clear button.booleanfalse
[nzBackdrop]whether or not the overlay should attach a backdropbooleanfalse
[nzBorderless]whether has borderless stylebooleanfalse
[nzOpen]dropdown expand state, double bindingbooleanfalse
[nzAutoFocus]Get focus by defaultbooleanfalse
[nzDisabled]Whether disabled selectbooleanfalse
[nzDropdownClassName]className of dropdown menustring | string[]-
[nzDropdownMatchSelectWidth]Whether dropdown's width is same width than select.booleantrue
[nzDropdownStyle]style of dropdown menuobject-
[nzCustomTemplate]The custom template of selectTemplateRef<{ $implicit: NzOptionComponent }>-
[nzServerSearch]nz-option will not be filtered when set to truebooleanfalse
[nzFilterOption]Filter options against it. The function will receive two arguments, inputValue and option, if the function returns true, the option will be included in the filtered set; Otherwise, it will be excluded.(input?: string, option?: NzOptionComponent) => boolean;-
[nzMaxMultipleCount]Max selected option can be selectednumberInfinity
[nzMode]Set mode of Select'multiple' | 'tags' | 'default''default'
[nzNotFoundContent]Specify content to show when no result matches..string | TemplateRef<void>'Not Found'
[nzPlaceHolder]Placeholder of selectstring-
[nzShowArrow]Whether to show the drop-down arrowbooleantrue(for single select), false(for multiple select)
[nzShowSearch]Whether show search input in single mode.booleanfalse
[nzSize]Size of Select input'large' | 'small' | 'default''default'
[nzStatus]Set validation status'error' | 'warning'-
[nzSuffixIcon]The custom suffix iconTemplateRef<any> | string-
[nzRemoveIcon]The custom remove iconTemplateRef<any>-
[nzClearIcon]The custom clear iconTemplateRef<any>-
[nzMenuItemSelectedIcon]The custom menuItemSelected iconTemplateRef<any>-
[nzTokenSeparators]Separator used to tokenize on tag/multiple modestring[][]
[nzLoading]indicate loading statebooleanfalse
[nzMaxTagCount]Max tag count to shownumber-
[nzOptions]use nzOptions or nz-option to pass options to the selectArray<{ label: string | number | TemplateRef<any>; value: any; key?: string | number; disabled?: boolean; hide?: boolean; groupLabel?: string | TemplateRef<any>;}>-
[nzMaxTagPlaceholder]Placeholder for not showing tagsTemplateRef<{ $implicit: any[] }>-
[nzOptionHeightPx]Each option height inside the dropdownnumber32
[nzOptionOverflowSize]Max option size inside the dropdown, overflow when exceed the sizenumber8
[nzSelectOnTab]Allows to select an item with TAB keybooleanfalse
(ngModelChange)Current selected nz-option value change callback.EventEmitter<any[]>-
(nzOpenChange)dropdown expand change callbackEventEmitter<boolean>false
(nzScrollToBottom)Called when dropdown scrolls to bottomEventEmitter<any>-
(nzOnSearch)Callback function that is fired when input changed.EventEmitter<string>-
(nzFocus)focus callbackEventEmitter<any>-
(nzBlur)blur callbackEventEmitter<any>-

nz-option#

PropertyDescriptionTypeDefault
[nzDisabled]Disable this optionbooleanfalse
[nzTitle]Native title hint on this optionstring | number-
[nzLabel]The text show in nz-select and dropdown menustring | number-
[nzValue]The value passed to ngModel of nz-selectany-
[nzKey]Should be passed when typeof nzValue - Object. Key will be used for performance optimizationsstring | number-
[nzHide]Whether hide the option in the option listbooleanfalse
[nzCustomContent]Whether custom nz-option content in drodown menu, the ng-content in nz-option will replace nzLabel when it was set to truebooleanfalse

nz-option-group#

PropertyDescriptionTypeDefault
[nzLabel]Group labelstring | number | TemplateRef<void>-

Methods#

nz-select#

NameDescription
blur()Remove focus
focus()Get focus