Advanced

Sortable MultiSelect

Using the react-sortable-hoc package we can easily allow sorting of MultiSelect values by drag and drop.

Custom Filter logic

While React-Select assumes a standard way of filtering the menu on search, our api allows you to customise that filtering logic in various ways.

createFilter function

React-Select exports a createFilter function that returns a filterOption method. By using this, users can pick and choose bits of the filtration logic to customise, without having to rewrite the logic wholesale.

Below is an example of how you could use the createFilter function to customise filtration logic in react-select.

filterOption

If you really would like to rewrite the filtration logic from the ground up, simply declare a new filterOption function to be passed in as a prop to react-select. For details on the shape of the filterOption prop, please see the proptypes in the api docs here.

Replacing builtins

For a list of builtins that we expose, please see the API docs here.

Methods

These two methods sit as callable methods on the component. They are designed to be accessible to wrapping components.

focus()

Focused the internal control input.

blur()

Blur the internal control input.

Action Meta

React Select exposes a variety of eventListeners to you via props. The onchange function prop now has the following signature. (value: ValueType, action: ActionType) => undefined;

The action argument is a string with the following possible values

• 'select-option': Selecting an option from the list
• 'deselect-option': (Multiple) Deselecting an option from the list
• 'remove-value': (Multiple) Removing a selected option with the remove button
• 'pop-value': Removing options using backspace
• 'set-value': Calling setValue from a component without an action
• 'clear': Removing all selected options with the clear button
• 'create-option': (Creatable) Creating a new option

By explicitly passing you what type of change event has been fired, we allow you to have more granular control over how the select behaves after an onChange even is fired.

Below is an example of replicating the behaviour supported by the (deprecated) onSelectResetsInput and (deprecated) closeMenuOnSelect props in react-select v1

Portaling

React-select exposes a menuPortalTarget prop, that lets you portal the select menu to a dom node of your choosing. Additionally we expose the menuPortal styles for layering purposes.

Controlled Props

Accessing Internals

SSR / Universal Rendering

React-Select uses Emotion for CSS which has zero-config server rendering. This means that all you need to do to server-render React-Select is call React's renderToString or use a framework like Next.js or Gatsby and it will work.

import { renderToString } from 'react-dom/server'
import App from './App'

const html = renderToString(<App />)

Experimental

Experimental recipes of prop combinations with react-select.

A popular recipe for using select when there's limited real estate.

When controlShouldRenderValue is disabled, it's recommended to also disable isClearable and backspaceRemovesValue.

Value: Fri Apr 25 2025 12:00:00 GMT+0000 (Coordinated Universal Time)

This example uses a combination of custom components and functions to make react-select behave like a date picker.

Type a date like "25/8/18", "tomorrow", "next monday", or "6 weeks from now" into the field to get date suggestions.