# @rc-component/select

> React Select

Latest version **1.11.0** (published 2026-08-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install @rc-component/select
pnpm add @rc-component/select
yarn add @rc-component/select
bun add @rc-component/select
```

## Health

**Score 70/100 (B)** — status: active.

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

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.11.0 |
| Published | 2026-08-14 |
| First published | 2025-02-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=8.x |
| Dependencies | 5 |
| Unpacked size | 334.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 938 |
| Maintainers | zombiej, afc163, madccc, peachscript, chenshuai2144 |
| Keywords | react, react-component, react-select, select |

## Links

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

## Dependencies (5)

- [clsx](https://npm.io/package/clsx.md) ^2.1.1
- [@rc-component/util](https://npm.io/package/@rc-component/util.md) ^1.11.1
- [@rc-component/trigger](https://npm.io/package/@rc-component/trigger.md) ^3.0.0
- [@rc-component/overflow](https://npm.io/package/@rc-component/overflow.md) ^1.0.0
- [@rc-component/virtual-list](https://npm.io/package/@rc-component/virtual-list.md) ^1.2.0

## 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

- 1.11.0 (latest) — 2026-08-14
- 1.10.1 — 2026-08-11
- 1.10.0 — 2026-07-10
- 1.9.1 — 2026-06-30
- 1.9.0 — 2026-06-26
- 1.8.2 — 2026-06-26
- 1.8.0 — 2026-06-25
- 1.7.1 — 2026-05-25
- 1.7.0 — 2026-05-14
- 1.6.15 — 2026-03-16
- 1.6.14 — 2026-03-02
- 1.6.13 — 2026-02-26
- 1.6.12 — 2026-02-24
- 1.6.11 — 2026-02-24
- 1.6.10 — 2026-02-14
- … 47 more at https://npm.io/package/@rc-component/select/versions

## README

<div align="center">
  <h1>@rc-component/select</h1>
  <p><sub><a href="https://ant.design"><img alt="Ant Design" height="14" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" style="vertical-align: -0.125em;" /></a> Part of the Ant Design ecosystem.</sub></p>
  <p>🎯 Composable Select component for React, with search, async-friendly option data, custom rendering, and virtual scrolling.</p>

  <p>
    <a href="https://npmjs.org/package/@rc-component/select"><img alt="NPM version" src="https://img.shields.io/npm/v/@rc-component/select.svg?style=flat-square"></a>
    <a href="https://npmjs.org/package/@rc-component/select"><img alt="npm downloads" src="https://img.shields.io/npm/dm/@rc-component/select.svg?style=flat-square"></a>
    <a href="https://github.com/react-component/select/actions/workflows/test.yml"><img alt="build status" src="https://github.com/react-component/select/actions/workflows/test.yml/badge.svg"></a>
    <a href="https://app.codecov.io/gh/react-component/select"><img alt="Codecov" src="https://img.shields.io/codecov/c/github/react-component/select/master.svg?style=flat-square"></a>
    <a href="https://bundlephobia.com/package/@rc-component/select"><img alt="bundle size" src="https://img.shields.io/bundlephobia/minzip/@rc-component/select?style=flat-square"></a>
    <a href="https://github.com/umijs/dumi"><img alt="dumi" src="https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square"></a>
  </p>
</div>

<p align="center">English | <a href="./README.zh-CN.md">简体中文</a></p>

## Highlights

| Area      | Support                                                    |
| --------- | ---------------------------------------------------------- |
| Data      | `options` data, legacy `Option` children, grouped options  |
| Modes     | Single select, `multiple`, `tags`, and `combobox`          |
| Search    | Controlled search, custom filter, custom sort              |
| Rendering | Custom option, label, selected item, clear, and menu icons |
| Scale     | Virtual scrolling with configurable item height            |

## Install

```bash
npm install @rc-component/select
```

## Usage

```tsx | pure
import Select from '@rc-component/select';
import '@rc-component/select/assets/index.css';

export default () => (
  <Select
    placeholder="Select a user"
    options={[
      { value: 'jack', label: 'Jack' },
      { value: 'lucy', label: 'Lucy' },
      { value: 'yiminghe', label: 'Yiminghe' },
    ]}
  />
);
```

## Examples

Run the local dumi site:

```bash
npm install
npm start
```

Then open `http://localhost:8000`.

## API

### Select

Select also accepts public props from `BaseSelect`, except `showSearch`, which is redefined by Select.

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| autoClearSearchValue | Deprecated. Use `showSearch.autoClearSearchValue` instead. | boolean | true |
| backfill | Backfill the active option into the input. Only works in `combobox` mode. | boolean | false |
| children | Legacy option children. Prefer `options` for new code. | ReactNode | - |
| classNames | Semantic class names. | `Partial<Record<SemanticName, string>>` | - |
| defaultActiveFirstOption | Whether the first option is active by default. | boolean | true |
| defaultValue | Initial selected value. | `ValueType` \| null | - |
| direction | Dropdown direction. | `ltr` \| `rtl` | `ltr` |
| fieldNames | Customize option field names. | `FieldNames` | - |
| filterOption | Deprecated. Use `showSearch.filterOption` instead. | boolean \| `FilterFunc<OptionType>` | - |
| filterSort | Deprecated. Use `showSearch.filterSort` instead. | `(optionA, optionB, info) => number` | - |
| labelInValue | Return labeled value objects instead of raw values. | boolean | false |
| labelRender | Custom selected label render. | `(props: LabelInValueType) => ReactNode` | - |
| listHeight | Popup list height. | number | 200 |
| listItemHeight | Popup list item height. | number | 20 |
| maxCount | Maximum selected item count. | number | - |
| menuItemSelectedIcon | Custom selected option icon. | `RenderNode` | - |
| mode | Select mode. | `combobox` \| `multiple` \| `tags` | - |
| onActive | Called when the active value changes. | `(value: ValueType) => void` | - |
| onChange | Called when selected value changes. | `(value: ValueType, option?: OptionType \| OptionType[]) => void` | - |
| onDeselect | Called when a value is deselected. | `(value, option) => void` | - |
| onSearch | Deprecated. Use `showSearch.onSearch` instead. | `(value: string) => void` | - |
| onSelect | Called when a value is selected. | `(value, option) => void` | - |
| optionFilterProp | Deprecated. Use `showSearch.optionFilterProp` instead. | string \| string[] | - |
| optionLabelProp | Option prop used as the selected label. | string | - |
| optionRender | Custom option renderer. | `(oriOption, info: { index: number }) => ReactNode` | - |
| options | Option data. | `OptionType[]` | - |
| searchValue | Deprecated. Use `showSearch.searchValue` instead. | string | - |
| showSearch | Enable search or configure search behavior. | boolean \| `SearchConfig<OptionType>` | - |
| styles | Semantic styles. | `Partial<Record<SemanticName, CSSProperties>>` | - |
| value | Controlled selected value. | `ValueType` \| null | - |
| virtual | Disable virtual scrolling when set to `false`. | boolean | true |

### Methods

| Name  | Description         | Parameters |
| ----- | ------------------- | ---------- |
| blur  | Remove focus.       | -          |
| focus | Focus the selector. | -          |

### SearchConfig

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| autoClearSearchValue | Clear search input after selecting or deselecting in multiple mode. | boolean | true |
| filterOption | Filter options by search input. | boolean \| `FilterFunc<OptionType>` | - |
| filterSort | Sort filtered options. | `(optionA, optionB, info: { searchValue: string }) => number` | - |
| onSearch | Called when search input changes. | `(value: string) => void` | - |
| optionFilterProp | Option prop used for filtering when `filterOption` is enabled. | string \| string[] | - |
| searchValue | Controlled search input value. | string | - |

### Option

`Option` is a legacy placeholder component. Prefer the `options` prop for new usage.

| Name      | Description         | Type                     | Default |
| --------- | ------------------- | ------------------------ | ------- |
| children  | Option label.       | ReactNode                | -       |
| className | Option class name.  | string                   | -       |
| disabled  | Disable the option. | boolean                  | false   |
| title     | Option title.       | string                   | -       |
| value     | Option value.       | string \| number \| null | -       |

### OptGroup

`OptGroup` is a legacy placeholder component. Prefer nested `options` data for new usage.

| Name      | Description        | Type      | Default |
| --------- | ------------------ | --------- | ------- |
| children  | Group options.     | ReactNode | -       |
| className | Group class name.  | string    | -       |
| disabled  | Disable the group. | boolean   | false   |
| label     | Group label.       | ReactNode | -       |
| title     | Group title.       | string    | -       |

## Development

```bash
npm install
npm start
npm test
npm run lint
npm run tsc
npm run compile
```

The dumi site runs at `http://localhost:8000` by default.

## Release

```bash
npm run prepublishOnly
```

The release flow is handled by `@rc-component/np` through the `rc-np` command after the package build.

## License

@rc-component/select is released under the [MIT](./LICENSE) license.

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