Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including rc-select with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var rcSelect = require("rc-select")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

rc-select v11.1.1

React Select


React Select

NPM version npm download build status Test coverage Dependencies DevDependencies bundle size



  • support IE11+,Chrome,Firefox,Safari


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




basic use

import Select, { Option } from 'rc-select';

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


Select props

idhtml id to set on the component wrapperString''
classNameadditional css class of root dom nodeString''
data-*html data attributes to set on the component wrapperString''
prefixClsprefix classString''
animationdropdown animation name. only support slide-up nowString''
transitionNamedropdown css animation nameString''
choiceTransitionNamecss animation name for selected items at multiple modeString''
dropdownMatchSelectWidthwhether dropdown's with is same with selectbooltrue
dropdownClassNameadditional className applied to dropdownString-
dropdownStyleadditional style applied to dropdownObject{}
dropdownAlignadditional align applied to dropdownObject{}
dropdownMenuStyleadditional style applied to dropdown menuObject{}
notFoundContentspecify content to show when no result matches.String'Not Found'
tokenSeparatorsseparator used to tokenize on tag/multiple modestring[]?
opencontrol select openbool
defaultOpencontrol select default openbool
placeholderselect placeholderReact Node
showSearchwhether show search input in single modebooltrue
showArrowwhether show arrowbooltrue (single mode), false (multiple mode)
allowClearwhether allowClearboolfalse
tagswhen 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.boolfalse
tagRenderrender custom tags.(props: CustomTagProps) => ReactNode-
maxTagTextLengthmax tag text length to shownumber-
maxTagCountmax tag count to shownumber-
maxTagPlaceholderplaceholder for omitted valuesReactNode/function(omittedValues)-
comboboxenable combobox mode(can not set multiple at the same time)boolfalse
multiplewhether multiple selectboolfalse
disabledwhether disabled selectboolfalse
filterOptionwhether filter options by input value. default filter by option's optionFilterProp prop's valuebooltrue/Function(inputValue:string, option:Option)
optionFilterPropwhich prop value of option will be used for filter if filterOption is trueString'value'
optionLabelProprender option value or option children as content of selectString: 'value'/'children''value'
defaultValueinitial selected option(s)String/Array-
valuecurrent selected option(s)String/Array/{key:String, label:React.Node}/Array<{key, label}>-
labelInValuewhether to embed label in value, see above value type. Not support combobox modeBoolfalse
backfillwhether backfill select option to search input (Only works in single and combobox mode)Boolfalse
onChangecalled when select an option or input value change(combobox)function(value, option:Option/Array-
onSearchcalled when input changedfunction-
onBlurcalled when blurfunction-
onFocuscalled when focusfunction-
onPopupScrollcalled when menu is scrolledfunction-
onSelectcalled when a option is selected. param is option's value and option instanceFunction(value, option:Option)-
onDeselectcalled when a option is deselected. param is option's value. only called for multiple or tagsFunction(value, option:Option)-
onInputKeyDowncalled when key down on inputFunction(event)-
defaultActiveFirstOptionwhether active first option by defaultbooltrue
getPopupContainercontainer which popup select menu rendered intofunction(trigger:Node):Nodefunction(){return document.body;}
getInputElementcustomize input elementfunction(): Element-
showActionactions trigger the dropdown to showString[]?-
autoFocusfocus select after mountBool-
autoClearSearchValueauto clear search input value when multiple select is selected/deselectedbooleantrue
inputIconspecify the select arrow iconReactNode-
clearIconspecify the clear iconReactNode-
removeIconspecify the remove iconReactNode-
menuItemSelectedIconspecify the remove iconReactNode | (props: MenuItemProps) => ReactNode-
dropdownRenderrender custom dropdown menu(menu: React.Node, props: MenuProps) => ReactNode-
loadingshow loading icon in arrowBooleanfalse
virtualDisable virtual scrollBooleantrue
directiondirection of dropdown'ltr' | 'rtl''ltr'


focusfocus select programmably--
blurblur select programmably--

Option props

classNameadditional class to optionString''
disabledno effect for click or keydown for this itemboolfalse
keyif react want you to set key, then key is same as value, you can omit valueString/number-
valuedefault filter by this attribute. if react want you to set key, then key is same as value, you can omit valueString/number-
titleif you are not satisfied with auto-generated title which is show while hovering on selected value, you can customize it with this propertyString-

OptGroup props

labelgroup labelString/React.Element-
valuedefault filter by this attribute. if react want you to set key, then key is same as value, you can omit valueString-


npm install
npm start


local example: http://localhost:9001/

online example:

Test Case

npm test


npm run coverage


rc-select is released under the MIT license.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free