Select

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).
• You probably need AutoComplete if you're looking for an input box that can be typed or selected.

Examples

<code src="./demo/basic.tsx">Basic Usage</code> <code src="./demo/search.tsx">Select with search field</code> <code src="./demo/search-filter-option.tsx">Custom Search</code> <code src="./demo/search-multi-field.tsx">Multi field search</code> <code src="./demo/multiple.tsx">multiple selection</code> <code src="./demo/size.tsx">Sizes</code> <code src="./demo/option-render.tsx">Custom dropdown options</code> <code src="./demo/search-sort.tsx">Search with sort</code> <code src="./demo/tags.tsx">Tags</code> <code src="./demo/optgroup.tsx">Option Group</code> <code src="./demo/coordinate.tsx">coordinate</code> <code src="./demo/search-box.tsx">Search Box</code> <code src="./demo/label-in-value.tsx">Get value of selected item</code> <code src="./demo/automatic-tokenization.tsx">Automatic tokenization</code> <code src="./demo/select-users.tsx">Search and Select Users</code> <code src="./demo/suffix.tsx" version="5.22.0">Prefix and Suffix</code> <code src="./demo/custom-dropdown-menu.tsx">Custom dropdown</code> <code src="./demo/hide-selected.tsx">Hide Already Selected</code> <code src="./demo/variant.tsx" version="5.13.0">Variants</code> <code src="./demo/filled-debug.tsx" debug>Filled debug</code> <code src="./demo/custom-tag-render.tsx">Custom Tag Render</code> <code src="./demo/custom-label-render.tsx">Custom Selected Label Render</code> <code src="./demo/responsive.tsx">Responsive maxTagCount</code> <code src="./demo/big-data.tsx">Big Data</code> <code src="./demo/status.tsx">Status</code> <code src="./demo/placement.tsx">Placement</code> <code src="./demo/placement-debug.tsx" debug>Dynamic Height</code> <code src="./demo/debug.tsx" debug>For Debug</code> <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code> <code src="./demo/option-label-center.tsx" debug>Options label Centered</code> <code src="./demo/debug-flip-shift.tsx" iframe="200" debug>Flip + Shift</code> <code src="./demo/component-token.tsx" debug>Component Token</code> <code src="./demo/maxCount.tsx" version="5.13.0">Max Count</code> <code src="./demo/style-class.tsx" version="6.0.0">Custom semantic dom styling</code>

API

Common props ref：Common props

Select props

Note, if you find that the drop-down menu scrolls with the page, or you need to trigger Select in other popup layers, please try to use getPopupContainer={triggerNode => triggerNode.parentElement} to fix the drop-down popup rendering node in the parent element of the trigger .

showSearch

Select Methods

Option props

OptGroup props

Semantic DOM

<code src="./demo/_semantic.tsx" simplify="true"></code>

Design Token

<ComponentTokenTable component="Select"></ComponentTokenTable>

FAQ

Why sometimes search will show 2 same option when in tags mode? {#faq-tags-mode-duplicate}

It's caused by option with different label and value. You can use optionFilterProp="label" to change filter logic instead.

When I click elements in popupRender, the select dropdown will not be closed? {#faq-popup-not-close}

You can control it by open prop: codesandbox.

I don't want dropdown close when click inside popupRender? {#faq-popup-keep-open}

Select will close when it lose focus. You can prevent event to handle this:

<Select
  popupRender={() => (
    <div
      onMouseDown={(e) => {
        e.preventDefault();
        e.stopPropagation();
      }}
    >
      Some Content
    </div>
  )}
/>

Why sometimes customize Option cause scroll break? {#faq-custom-option-scroll}

Virtual scroll internal set item height as 24px. You need to adjust listItemHeight when your option height is less and listHeight config list container height:

<Select listItemHeight={10} listHeight={250} />

Note: listItemHeight and listHeight are internal props. Please only modify when necessary.

Why a11y test report missing aria- props? {#faq-aria-attribute}

Select only create a11y auxiliary node when operating on. Please open Select and retry. For aria-label & aria-labelledby miss warning, please add related prop to Select with your own requirement.

Default virtual scrolling will create a mock element to simulate an accessible binding. If a screen reader needs to fully access the entire list, you can set virtual={false} to disable virtual scrolling and the accessibility option will be bound to the actual element.

Custom tags generated using tagRender will pop up a drop-down box when clicked to close {#faq-tagrender-dropdown}

If you don't want a drop-down menu to appear automatically after clicking on an element (such as a close icon), you can prevent the MouseDown event from propagating on it.

<Select
  tagRender={(props) => {
    const { closable, label, onClose } = props;
    return (
      <span className="border">
        {label}
        {closable ? (
          <span
            onMouseDown={(e) => e.stopPropagation()}
            onClick={onClose}
            className="cursor-pointer"
          >
            ❎
          </span>
        ) : null}
      </span>
    );
  }}
/>