# rc-select

> React Select

Latest version **14.16.8** (published 2025-05-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install rc-select
pnpm add rc-select
yarn add rc-select
bun add rc-select
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 14.16.8 |
| Published | 2025-05-15 |
| First published | 2015-02-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=8.x |
| Dependencies | 7 |
| Unpacked size | 336.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 938 |
| Maintainers | yesmeck, afc163, yiminghe, warmhug, yutingzhao1991, zombiej, picodoth, chenshuai2144, madccc |
| Keywords | react, react-component, react-select, select |

## Links

- npm: https://www.npmjs.com/package/rc-select
- Repository: https://github.com/react-component/select
- Homepage: http://github.com/react-component/select
- Issues: http://github.com/react-component/select/issues
- npm.io page: https://npm.io/package/rc-select

## Dependencies (7)

- [rc-util](https://npm.io/package/rc-util.md) ^5.16.1
- [rc-motion](https://npm.io/package/rc-motion.md) ^2.0.1
- [classnames](https://npm.io/package/classnames.md) 2.x
- [rc-overflow](https://npm.io/package/rc-overflow.md) ^1.3.1
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.10.1
- [rc-virtual-list](https://npm.io/package/rc-virtual-list.md) ^3.5.2
- [@rc-component/trigger](https://npm.io/package/@rc-component/trigger.md) ^2.1.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 14.16.8 (latest) — 2025-05-15
- 8.6.7-alpha.0 (beta) — 2018-12-20
- 14.16.7 — 2025-05-07
- 14.16.6 — 2025-01-17
- 14.16.5 — 2025-01-12
- 14.16.4 — 2024-12-05
- 14.16.3 — 2024-11-07
- 14.16.2 — 2024-10-16
- 14.16.1 — 2024-10-15
- 14.16.0 — 2024-10-10
- 14.15.2 — 2024-09-03
- 14.15.1 — 2024-07-19
- 14.15.0 — 2024-06-07
- 14.14.0 — 2024-05-18
- 14.13.4 — 2024-05-17
- … 459 more at https://npm.io/package/rc-select/versions

## README

# rc-select

---

React Select Component.

<!-- prettier-ignore -->
[![NPM version][npm-image]][npm-url]
[![npm download][download-image]][download-url]
[![build status][github-actions-image]][github-actions-url]
[![Codecov][codecov-image]][codecov-url]
[![bundle size][bundlephobia-image]][bundlephobia-url]
[![dumi][dumi-image]][dumi-url]

[npm-image]: http://img.shields.io/npm/v/rc-select.svg?style=flat-square
[npm-url]: http://npmjs.org/package/rc-select
[travis-image]: https://img.shields.io/travis/react-component/select/master?style=flat-square
[travis-url]: https://travis-ci.com/react-component/select
[github-actions-image]: https://github.com/react-component/select/workflows/CI/badge.svg
[github-actions-url]: https://github.com/react-component/select/actions
[codecov-image]: https://img.shields.io/codecov/c/github/react-component/select/master.svg?style=flat-square
[codecov-url]: https://app.codecov.io/gh/react-component/select
[david-url]: https://david-dm.org/react-component/select
[david-image]: https://david-dm.org/react-component/select/status.svg?style=flat-square
[david-dev-url]: https://david-dm.org/react-component/select?type=dev
[david-dev-image]: https://david-dm.org/react-component/select/dev-status.svg?style=flat-square
[download-image]: https://img.shields.io/npm/dm/rc-select.svg?style=flat-square
[download-url]: https://npmjs.org/package/rc-select
[bundlephobia-url]: https://bundlephobia.com/package/rc-select
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-select
[dumi-url]: https://github.com/umijs/dumi
[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square

## Screenshots

<img src="https://gw.alipayobjects.com/zos/antfincdn/d13eUZlgdJ/tupian.png" />

## Feature

- support IE11+,Chrome,Firefox,Safari

### Keyboard

- Open select (focus input || focus and click)
- KeyDown/KeyUp/Enter to navigate menu

## install

[![rc-select](https://nodei.co/npm/rc-select.png)](https://npmjs.org/package/rc-select)

## Usage

### basic use

```jsx | pure
import Select, { Option } from 'rc-select';
import 'rc-select/assets/index.css';

export default () => (
  <Select>
    <Option value="jack">jack</Option>
    <Option value="lucy">lucy</Option>
    <Option value="yiminghe">yiminghe</Option>
  </Select>
);
```

## API

### Select props

<!-- prettier-ignore -->
| name | description | type | default |
| --- | --- | --- | --- |
| id | html id to set on the component wrapper | String | '' |
| className | additional css class of root dom node | String | '' |
| data-\* | html data attributes to set on the component wrapper | String | '' |
| prefixCls | prefix class | String | '' |
| animation | dropdown animation name. only support slide-up now | String | '' |
| transitionName | dropdown css animation name | String | '' |
| choiceTransitionName | css animation name for selected items at multiple mode | String | '' |
| dropdownMatchSelectWidth | whether dropdown's width is same with select | boolean | true |
| dropdownClassName | additional className applied to dropdown | String | - |
| dropdownStyle | additional style applied to dropdown | React.CSSProperties | {} |
| dropdownAlign | additional align applied to dropdown | [AlignType](https://github.com/react-component/trigger/blob/728d7e92394aa4b3214650f743fc47e1382dfa68/src/interface.ts#L25-L80) | {} |
| dropdownMenuStyle | additional style applied to dropdown menu | Object | React.CSSProperties |
| notFoundContent | specify content to show when no result matches. | ReactNode | 'Not Found' |
| tokenSeparators | separator used to tokenize on tag/multiple mode | string[]? |  |
| open | control select open | boolean |  |
| defaultOpen | control select default open | boolean |  |
| placeholder | select placeholder | React Node |  |
| showSearch | whether show search input in single mode | boolean | true |
| allowClear | whether allowClear | boolean | { clearIcon?: ReactNode } | false |
| tags | when tagging is enabled the user can select from pre-existing options or create a new tag by picking the first choice, which is what the user has typed into the search box so far. | boolean | false |
| tagRender | render custom tags. | (props: CustomTagProps) => ReactNode | - |
| maxTagTextLength | max tag text length to show | number | - |
| maxTagCount | max tag count to show | number | - |
| maxTagPlaceholder | placeholder for omitted values | ReactNode/function(omittedValues) | - |
| combobox | enable combobox mode(can not set multiple at the same time) | boolean | false |
| multiple | whether multiple select | boolean | false |
| disabled | whether disabled select | boolean | false |
| filterOption | whether filter options by input value. default filter by option's optionFilterProp prop's value | boolean | true/Function(inputValue:string, option:Option) |
| optionFilterProp | which prop value of option will be used for filter if filterOption is true | String | 'value' |
| filterSort | Sort function for search options sorting, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction. | Function(optionA:Option, optionB: Option) | - |
| optionLabelProp | render option value or option children as content of select | String: 'value'/'children' | 'value' |
| defaultValue | initial selected option(s) | String \| String[] | - |
| value | current selected option(s) | String \| String[] \| {key:String, label:React.Node} \| {key:String, label:React.Node}[] | - |
| labelInValue | whether to embed label in value, see above value type. Not support `combobox` mode | boolean | false |
| backfill | whether backfill select option to search input (Only works in single and combobox mode) | boolean | false |
| onChange | called when select an option or input value change(combobox) | function(value, option:Option \| Option[]) | - |
| onSearch | called when input changed | function | - |
| onBlur | called when blur | function | - |
| onFocus | called when focus | function | - |
| onPopupScroll | called when menu is scrolled | function | - |
| onSelect | called when a option is selected. param is option's value and option instance | Function(value, option:Option) | - |
| onDeselect | called when a option is deselected. param is option's value. only called for multiple or tags | Function(value, option:Option) | - |
| onInputKeyDown | called when key down on input | Function(event) | - |
| defaultActiveFirstOption | whether active first option by default | boolean | true |
| getPopupContainer | container which popup select menu rendered into | function(trigger:Node):Node | function(){return document.body;} |
| getInputElement | customize input element | function(): Element | - |
| showAction | actions trigger the dropdown to show | String[]? | - |
| autoFocus | focus select after mount | boolean | - |
| autoClearSearchValue | auto clear search input value when multiple select is selected/deselected | boolean | true |
| prefix | specify the select prefix icon or text | ReactNode | - |
| suffixIcon | specify the select arrow icon | ReactNode | - |
| clearIcon | specify the clear icon | ReactNode | - |
| removeIcon | specify the remove icon | ReactNode | - |
| menuItemSelectedIcon | specify the item selected icon | ReactNode \| (props: MenuItemProps) => ReactNode | - |
| dropdownRender | render custom dropdown menu | (menu: React.Node) => ReactNode | - |
| loading | show loading icon in arrow | boolean | false |
| virtual | Disable virtual scroll | boolean | true |
| direction | direction of dropdown | 'ltr' \| 'rtl' | 'ltr' |
| optionRender | Custom rendering options | (oriOption: FlattenOptionData\<BaseOptionType\> , info: { index: number }) => React.ReactNode | - |
| labelRender  | Custom rendering label   |  (props: LabelInValueType) => React.ReactNode   | - |
| maxCount | The max number of items can be selected | number | - |

### Methods

| name  | description               | parameters | return |
| ----- | ------------------------- | ---------- | ------ |
| focus | focus select programmably | -          | -      |
| blur  | blur select programmably  | -          | -      |

### Option props

| name | description | type | default |
| --- | --- | --- | --- |
| className | additional class to option | String | '' |
| disabled | no effect for click or keydown for this item | boolean | false |
| key | if react want you to set key, then key is same as value, you can omit value | String/number | - |
| value | default filter by this attribute. if react want you to set key, then key is same as value, you can omit value | String/number | - |
| title | if you are not satisfied with auto-generated `title` which is show while hovering on selected value, you can customize it with this property | String | - |

### OptGroup props

| name | description | type | default |
| --- | --- | --- | --- |
| label | group label | String/React.Element | - |
| key | - | String | - |
| value | default filter by this attribute. if react want you to set key, then key is same as value, you can omit value | String | - |
| className | same as `Option props` | String | '' |
| title | same as `Option props` | String | - |

## Development

```
npm install
npm start
```

## Example

local example: http://localhost:9001/

online example: http://select.react-component.now.sh/

## Test Case

```
npm test
```

## Coverage

```
npm run coverage
```

## License

rc-select is released under the MIT license.

---
_Source: https://npm.io/package/rc-select · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._