Select component to select value from options.

API

Select

• [ ] allowClear: Show clear button boolean false
• [ ] autoClearSearchValue: Whether the current search will be cleared on selecting an item. Only applies when mode is set to multiple or tags boolean true
• [ ] autoFocus: Get focus by default boolean false
• [ ] bordered: Whether has border style boolean true
• [ ] clearIcon: The custom clear icon ReactNode -
• [ ] defaultActiveFirstOption: Whether active first option by default boolean true
• [ ] defaultOpen: Initial open state of dropdown boolean -
• [ ] defaultValue: Initial selected option string | string[]
• [ ] disabled: Whether disabled select boolean false
• [ ] dropdownClassName: The className of dropdown menu string -
• [ ] dropdownMatchSelectWidth: Determine whether the dropdown menu and the select input are the same width. Default set min-width same as input. Will ignore when value less than select width. false will disable virtual scroll boolean | number true
• [ ] dropdownRender: Customize dropdown content (originNode: ReactNode) => ReactNode -
• [ ] dropdownStyle: The style of dropdown menu CSSProperties -
• [ ] filterOption: If true, filter options by input, if function, 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 boolean | function(inputValue, option) true
• [ ] filterSort: Sort function for search options sorting, see Array.sort's compareFunction (optionA: Option, optionB: Option) => number - 4.9.0
• [ ] getPopupContainer: Parent Node which the selector should be rendered to. Default to body. When position issues happen, try to modify it into scrollable content and position it relative. Example function(triggerNode) () => document.body
• [ ] labelInValue: Whether to embed label in value, turn the format of value from string to { value: string, label: ReactNode } boolean false
• [ ] listHeight: Config popup height number 256
• [ ] loading: Indicate loading state boolean false
• [ ] maxTagCount: Max tag count to show number -
• [ ] value: Current selected option
• [ ] maxTagPlaceholder: Placeholder for not showing tags ReactNode | function(omittedValues) -
• [ ] maxTagTextLength: Max tag text length to show number -
• [ ] menuItemSelectedIcon The custom menuItemSelected icon with multiple options ReactNode - * [ ]mode: Set mode of Select multiple | tags - * [ ]notFoundContent: Specify content to show when no result matches ReactNode Not Found * [ ]open: Controlled open state of dropdown boolean - * [ ]optionFilterProp: Which prop value of option will be used for filter if filterOption is true. If options is set, it should be set to label string value * [ ]optionLabelProp: Which prop value of option will render as content of select. Example string children * [ ]options: Select options. Will get better perf than jsx definition { label, value }[] - * [ ]placeholder:Placeholder of select ReactNode - * [ ]removeIcon: The custom remove icon ReactNode - * [ ]searchValue: The current input "search" text string - * [ ]showArrow: Whether to show the drop-down arrow boolean true(for single select), false(for multiple select) * [ ]showSearch: Whether show search input in single mode boolean false * [ ]size: Size of Select input large | middle | small middle * [ ]suffixIcon The custom suffix icon ReactNode -
• [ ] tagRender: Customize tag render (props) => ReactNode -
• [ ] tokenSeparators: Separator used to tokenize on tag and multiple mode string[] -
• [ ] virtual: Disable virtual scroll when set to false boolean true 4.1.0
• [ ] onBlur: Called when blur function -
• [ ] onChange: Called when select an option or input value change function(value, option:Option | Array<Option>) -
• [ ] onClear: Called when clear function - 4.6.0
• [ ] onDeselect: Called when a option is deselected, param is the selected option's value. Only called for multiple or tags, effective in multiple or tags mode only function(string | number | LabeledValue) -
• [ ] onDropdownVisibleChange: Called when dropdown open function(open) -
• [ ] onFocus: Called when focus function -
• [ ] onInputKeyDown: Called when key pressed function -
• [ ] onMouseEnter: Called when mouse enter function -
• [ ] onMouseLeave: Called when mouse leave function -
• [ ] onPopupScroll: Called when dropdown scrolls function -
• [ ] onSearch: Callback function that is fired when input changed function(value: string) -
• [ ] onSelect: Called when a option is selected, the params are option's value (or key) and option instance

Select.Option

• [ ] className: The additional class to option string -
• [ ] disabled: Disable this option boolean false
• [ ] title: title of Select after select this Option string -
• [ ] value: Default to filter with this property string | number -

Example

<Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange}>

<Select.Option value="jack">Jack</Option>
<Select.Option value="lucy">Lucy</Option>
<Select.Option value="disabled" disabled>
  Disabled
</Option>
<Select.Option value="Yiminghe">yiminghe</Option>

Properties