Select UI Component

Based on Ant Design Select


npm i @synerise/ds-select
yarn add @synerise/ds-select


import Select from '@synerise/ds-select';
const { Option, OptGroup } = Select;
<Select defaultValue="insta">
<OptGroup label="Platform">
<Option value="insta">Instagram</Option>
<Option value="fb">Facebook</Option>
<OptGroup label="Followers">
<Option value="1M">1 Million</Option>
<Option value="1B">1 Billion</Option>

Select default

Select multiple mode

Select with options group


Select props

allowClearShow clear button.booleanfalse
autoClearSearchValueWhether the current search will be cleared on selecting an itembooleantrue
autoFocusGet focus by defaultbooleanfalse
clearIconThe custom clear iconReact.ReactNode-
defaultActiveFirstOptionWhether active first option by defaultbooleantrue
defaultOpenInitial open state of dropdownboolean-
defaultValueInitial selected option.string / string[] / number / number[] / LabeledValue / LabeledValue[]-
descriptioninput descriptionstring-
disabledWhether disabled selectbooleanfalse
dropdownClassNameclassName of dropdown menustring-
dropdownMatchSelectWidthWhether dropdown's width is same with select.booleantrue
dropdownMenuStyleadditional style applied to dropdown menuReact.CSSProperties-
dropdownRenderCustomize dropdown content(menuNode: React.ReactNode, props) => React.ReactNode-
dropdownStylestyle of dropdown menuReact.CSSProperties-
errorTexterror message, if provided input will be set in error statestring-
errorif provided input will be set in error state, without error messageboolean-
filterOptionIf true, filter options by input, if function, filter options against it.boolean / (inputValue: string / number / LabeledValue, option: Option) => voidtrue
firstActiveValueValue of action option by defaultstring or string[]-
getPopupContainerParent Node which the selector should be rendered to. Default to body(triggerNode: React.ReactNode) => void() => document.body
labelinput labelstring-
labelInValuewhether to embed label in valuebooleanfalse
loadingindicate loading stateBooleanfalse
maxTagCountMax tag count to shownumber-
maxTagPlaceholderPlaceholder for not showing tagsReact.ReactNode/function(omittedValues)-
maxTagTextLengthMax tag count to shownumber-
menuItemSelectedIconThe custom menuItemSelected icon with multiple optionsReact.ReactNode-
modeSet mode of Selectdefault / multiple / tagsdefault
notFoundContentSpecify content to show when no result matches.stringNot Found
onBlurCalled when blur(e: Event) => void-
onChangeCalled when select an option or input value change, or value of input is changed in combobox mode(value: string / number / LabeledValue, option: Option / Option[]) => void-
onDeselectCalled when a option is deselected, param is the selected option's value.(value: string / number / LabeledValue) => void-
onDropdownVisibleChangeCall when dropdown open(open: boolean) => void-
onFocusCalled when focus(e: Event) => void-
onInputKeyDownCalled when key pressed(e: Event) => void-
onMouseEnterCalled when mouse enter(e: Event) => void-
onMouseLeaveCalled when mouse leave(e: Event) => void-
onPopupScrollCalled when dropdown scrolls(e: Event) => void-
onSearchCallback function that is fired when input changed.(value: string) => void
onSelectCalled when a option is selected, the params are option's value (or key) and option instance.(value: string / number / LabeledValue, option:Option) => void-
openControlled open state of dropdownboolean-
optionFilterPropWhich prop value of option will be used for filter if filterOption is truestringvalue
optionLabelPropWhich prop value of option will render as content of select.stringvalue for combobox, children for other modes
placeholderPlaceholder of selectstring / React.ReactNode-
removeIconThe custom remove iconReact.ReactNode-
showArrowWhether to show the drop-down arrowbooleantrue
showSearchWhether show search input in single mode.booleanfalse
sizeSize of Select input. default large smallstringdefault
suffixIconThe custom suffix iconReact.ReactNode-
tokenSeparatorsSeparator used to tokenize on tag/multiple modestring[]
tooltipTooltip contentReact.ReactNode-
valueCurrent selected option.string / string[] / number / number[] / LabeledValue / LabeledValue[]-

Option props

disabledDisable this option booleanfalse
keySame usage as value. If React request you to set this property, you can set it to value of option, and then omit value property.string
titletitle of Select after select this Optionstring-
valuedefault to filter with this property stringnumber-
classNameadditional class to option string-

Option group props

keyKey of an optionstring-
labelGroup label`stringReact.Element`-