The Select control for React. Initially built for use in KeystoneJS.
See react-select.com for live demos and comprehensive docs.
react-select is funded by Thinkmill and Atlassian.
We are an open source project that is continuously supported by the community.
React Select helps you develop powerful select components that just work out of the box, without stopping you from customising the parts that are important to you.
For the story behind this component, watch Jed's talk at React Conf 2019 - building React Select
Features include:
- Flexible approach to data, with customisable functions
- Extensible styling API with emotion
- Component Injection API for complete control over the UI behaviour
- Controllable state props and modular architecture
- Long-requested features like option groups, portal support, animation, and more
Using an older version?
- v3, v4, and v5 upgrade guide
- v2 upgrade guide
- React Select v1 documentation and examples are available at v1.react-select.com
Installation and usage
The easiest way to use react-select is to install it from npm and build it into your app with Webpack.
yarn add react-select
Then use it in your app:
"import React, { useState } from 'react';
import Select from 'react-select';
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' },
];
export default function App() {
const [selectedOption, setSelectedOption] = useState(null);
return (