Welcome

Each of the examples below is an interactive example of react-select.

See the source or open the examples on codesandbox using the buttons that appear when you hover over each select below.

For complete docs, see the Props API and Advanced Usage.

To contribute, or open an issue, check out the source code on GitHub.

Getting Started

Start by installing react-select

yarn add react-select

or

npm i --save react-select

Import the default export and render in your component:

import React from 'react'
import Select from 'react-select'

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
]

const MyComponent = () => (
  <Select options={options} />
)

Animated Components

React-Select comes with a makeAnimated function that create animated wrappers around components passed in as arguments. If no arguments are passed, built-in components are wrapped instead.

import makeAnimated from 'react-select/animated';

Remove the values below to see them in action.

Custom Styles

Style individual components with custom css using the styles prop.

You can see a full explanation of how to do this on the styles page.

Async

Use the Async component to load options from a remote source as the user types.

import AsyncSelect from 'react-select/async';

You can see a full explanation of how to do this on the async page.

Creatable

The Creatable component enables users to create new options along with choosing existing options.

import Creatable from 'react-select/creatable';

You can see a full explanation of how to do this on the creatable page.

Fixed Options