The Select Menu component allows selection of multiple items from a dropdown list.
childrenstring | nodedisabledboolheightnumberisHighlightedboolisSelectableboolisSelectedboolitemanyonDeselectfunconSelectfuncstyleanyoptionsarrayOfclosefuncheightnumberwidthnumberisMultiSelectboolWhen true, multi select is accounted for.
closeOnSelectboolWhen true, menu closes on option selection.
selectedarrayOfThis holds the values of the options
shouldAutoFocusboolWhen true, menu auto focuses on the search/filter bar.
onSelectfunconDeselectfunconFilterChangefunchasFilterbooloptionSizenumberrenderItemfuncfilterPlaceholderstringfilterIconelementType | elementoptionsFilterfuncdefaultSearchValuestringtitlestringThe title of the Select Menu.
widthstring | numberThe width of the Select Menu.
heightstring | numberThe height of the Select Menu.
optionsarrayOfThe options to show in the menu. [{ label: String, value: String | Number }]
onSelectfuncFunction that is called when an option is selected.
onDeselectfuncFunction that is called when an option is deselected.
selectedSelectedPropTypeThe selected value/values.
isMultiSelectboolWhen true, multi select is accounted for.
hasTitleboolWhen true, show the title.
hasFilterboolWhen true, show the filter.
filterPlaceholderstringThe placeholder of the search filter.
filterIconelementType | elementThe icon of the search filter.
onFilterChangefuncFunction that is called as the onChange() event for the filter.
positionPosition.TOP | Position.TOP_LEFT | Position.TOP_RIGHT | Position.BOTTOM | Position.BOTTOM_LEFT | Position.BOTTOM_RIGHTThe position of the Select Menu.
detailViewfunc | nodeCan be a function that returns a node, or a node itself, that is rendered on the right side of the Select Menu to give additional information when an option is selected.
titleViewfunc | nodeCan be a function that returns a node, or a node itself, that is rendered in the header section of the Select Menu to customize the header.
emptyViewfunc | nodeCan be a function that returns a node, or a node itself, that is rendered instead of the options list when there are no options.
closeOnSelectboolitemRendererfuncCan pass a method that can be used to render custom items in the select menu
itemHeightnumberThe height of the items in the select menu list
shouldAutoFocusboolWhen true, menu auto focuses on the search/filter bar.
closefunctitlestringwidthstring | numberheightstring | numberheaderHeightnumberoptionsarrayOfhasTitleboolhasFilterboolfilterPlaceholderstringfilterIconelementType | elementlistPropsshapeisMultiSelectboolWhen true, multi select is accounted for.
closeOnSelectbooltitleViewfunc | nodeNode that is placed in the header section, above the options.
detailViewnodeNode that is placed right next to the options.
emptyViewnodeNode that is displayed instead of options list when there are no options.