HomePropsStylesComponentsAsyncCreatableAdvancedUpgrading

React Select

A flexible and beautiful Select Input control for ReactJS with multiselect, autocomplete, async and creatable support.

Star
🎉 Feature Highlights
API
Prop Types
StateManager Props
Select Props
Async props
Creatable props
Replacing Components
Components

API

Prop Types

Internal Types

You'll see these in the public props below:

type OptionType = { [string]: any }
type OptionsType = Array<OptionType>

type GroupType = {
  [string]: any, // group label
  options: OptionsType,
}

type ValueType = OptionType | OptionsType | null | void

type CommonProps = {
  clearValue: () => void,
  getStyles: (string, any) => {},
  getValue: () => ValueType,
  hasValue: boolean,
  isMulti: boolean,
  options: OptionsType,
  selectOption: OptionType => void,
  selectProps: any,
  setValue: (ValueType, ActionTypes) => void,
  emotion: any,
}

// passed as the second argument to `onChange`
type ActionTypes = | 'clear' | 'create-option' | 'deselect-option' | 'pop-value' | 'remove-value' | 'select-option' | 'set-value'

Even when commonProps are not listed in the prop types below, a custom component will still have access to them.

StateManager Props

The statemanager is a utility class that wraps around the base Select and each Select variant to expose inputValue and value as controllable props. For more detailed information on these props and their usage please see the controlled props section of the advanced page.

defaultInputValue string = ""

defaultMenuIsOpen boolean = false

defaultValue union = null

One of <
Object,
Array<Object>,
null,
undefined
>

inputValue string

menuIsOpen boolean

value union

One of <
Object,
Array<Object>,
null,
undefined
>

onChange function

function (
One of <
Object,
Array<Object>,
null,
undefined
>,
{
action required One of <
"select-option",
"deselect-option",
"remove-value",
"pop-value",
"set-value",
"clear",
"create-option"
>
}
) => undefined

Select Props

These base props are those available to be passed to all select variants.

"aria-label" string

Aria label (for assistive tech)

"aria-labelledby" string

HTML ID of an element that should be used as the label (for assistive tech)

autoFocus boolean

Focus the control when it is mounted

backspaceRemovesValue boolean = true

Remove the currently focused option when the user presses backspace

blurInputOnSelect boolean = isTouchCapable()

Remove focus from the input when the user selects an option (handy for dismissing the keyboard on touch devices)

captureMenuScroll boolean = !isTouchCapable()

When the user reaches the top/bottom of the menu, prevent scroll on the scroll-parent

className string

Sets a className attribute on the outer component

classNamePrefix union

If provided, all inner components will be given a prefixed className attribute.

This is useful when styling via CSS classes instead of the Styles API approach.

One of <
string,
null
>

closeMenuOnSelect boolean = true

Close the select menu when the user selects an option

closeMenuOnScroll union = false

If true, close the select menu when the user scrolls the document/body.

If a function, takes a standard javascript ScrollEvent you return a boolean:

true => The menu closes

false => The menu stays open

This is useful when you have a scrollable modal and want to portal the menu out, but want to avoid graphical issues.

One of <
boolean,
EventListener
>

components All Components Object = {}

This complex object includes all the compositional components that are used in react-select. If you wish to overwrite a component, pass in an object with the appropriate namespace.

If you only wish to restyle a component, we recommend using the styles prop instead. For a list of the components that can be passed in, and the shape that will be passed to them, see the components docs

controlShouldRenderValue boolean = true

Whether the value of the select, e.g. SingleValue, should be displayed in the control.

delimiter string

Delimiter used to join multiple values into a single HTML Input value

escapeClearsValue boolean = false

Clear all values when the user presses escape AND the menu is closed

filterOption union = createFilter()

Custom method to filter whether an option should be displayed in the menu

One of <
function (
{
label string required
value string required
data required Object
},
string
) => boolean,
null
>

formatGroupLabel typeof formatGroupLabel = (group) => string

Formats group labels in the menu as React components

An example can be found in the Replacing builtins documentation.

(group) => string

formatOptionLabel function

Formats option labels in the menu and control as React components

function (
Object,
{
context required One of <
"menu",
"value"
>
inputValue string required
selectValue required One of <
Object,
Array<Object>,
null,
undefined
>
}
) => react.Node

getOptionLabel typeof getOptionLabel = (option) => string

Resolves option data to a string to be displayed as the label by components

(option) => string

getOptionValue typeof getOptionValue = (option) => string

Resolves option data to a string to compare options and specify value attributes

(option) => string

hideSelectedOptions boolean

Hide the selected option from the menu

id string

The id to set on the SelectContainer component.

inputValue string

The value of the search input

inputId string

The id of the search input

instanceId union

Define an id prefix for the select components e.g. {your-id}-value

One of <
number,
string
>

isClearable boolean

Is the select value clearable

isDisabled boolean = false

Is the select disabled

isLoading boolean = false

Is the select in a state of loading (async)

isOptionDisabled function = (option) => boolean

Override the built-in logic to detect whether an option is disabled

An example can be found in the Replacing builtins documentation.

function (
Object,
Array<Object>
) => One of <
boolean,
false
>

isOptionSelected function

Override the built-in logic to detect whether an option is selected

function (
Object,
Array<Object>
) => boolean

isMulti boolean = false

Support multiple selected options

isRtl boolean = false

Is the select direction right-to-left

isSearchable boolean = true

Whether to enable search functionality

loadingMessage function = () => undefined

Async: Text to display when loading options

({
inputValue string required
}) => One of <
string,
null
>

minMenuHeight number = 140

Minimum height of the menu before flipping

maxMenuHeight number = 300

Maximum height of the menu before scrolling

menuIsOpen boolean = false

Whether the menu is open

menuPlacement union = "bottom"

Default placement of the menu in relation to the control. 'auto' will flip when there isn't enough space below the control.

One of <
"auto",
"bottom",
"top"
>

menuPosition union = "absolute"

The CSS position value of the menu, when "fixed" extra layout management is required

One of <
"absolute",
"fixed"
>

menuPortalTarget HTMLElement

Whether the menu should use a portal, and where it should attach

An example can be found in the Portaling documentation

HTMLElement

menuShouldBlockScroll boolean = false

Whether to block scroll events when the menu is open

menuShouldScrollIntoView boolean = !isMobileDevice()

Whether the menu should be scrolled into view when it opens

name string

Name of the HTML Input (optional - without this, no input will be rendered)

noOptionsMessage function = () => undefined

Text to display when there are no options

({
inputValue string required
}) => One of <
react.Node,
null
>

onBlur function

Handle blur events on the control

(SyntheticFocusEvent<HTMLElement>) => undefined

onChange function

Handle change events on the select

function (
One of <
Object,
Array<Object>,
null,
undefined
>,
{
action required One of <
"select-option",
"deselect-option",
"remove-value",
"pop-value",
"set-value",
"clear",
"create-option"
>
}
) => undefined

onFocus function

Handle focus events on the control

(SyntheticFocusEvent<HTMLElement>) => undefined

onInputChange function

Handle change events on the input

function (
string,
{
action required One of <
"set-value",
"input-change",
"input-blur",
"menu-close"
>
}
) => undefined

onKeyDown function

Handle key down events on the select

(SyntheticKeyboardEvent<HTMLElement>) => undefined

onMenuOpen function

Handle the menu opening

() => undefined

onMenuClose function

Handle the menu closing

() => undefined

onMenuScrollToTop function

Fired when the user scrolls to the top of the menu

(SyntheticEvent<HTMLElement>) => undefined

onMenuScrollToBottom function

Fired when the user scrolls to the bottom of the menu

(SyntheticEvent<HTMLElement>) => undefined

openMenuOnFocus boolean = false

Allows control of whether the menu is opened when the Select is focused

openMenuOnClick boolean = true

Allows control of whether the menu is opened when the Select is clicked

options Array<object> = []

Array of options that populate the select menu

Array<Object>

pageSize number = 5

Number of options to jump in menu when page{up|down} keys are used

placeholder import = "Select..."

Placeholder for the select value

react.Node

screenReaderStatus function = ({ count }) => undefined

Status to relay to screen readers

({
count number required
}) => string

styles $Shape<object> = {}

Style modifier methods

A basic example can be found at the bottom of the Replacing builtins documentation.

$Shape<{
clearIndicator function (
Object,
Object
) => Object
container function (
Object,
Object
) => Object
control function (
Object,
Object
) => Object
dropdownIndicator function (
Object,
Object
) => Object
group function (
Object,
Object
) => Object
groupHeading function (
Object,
Object
) => Object
indicatorsContainer function (
Object,
Object
) => Object
indicatorSeparator function (
Object,
Object
) => Object
input function (
Object,
Object
) => Object
loadingIndicator function (
Object,
Object
) => Object
loadingMessage function (
Object,
Object
) => Object
menu function (
Object,
Object
) => Object
menuList function (
Object,
Object
) => Object
menuPortal function (
Object,
Object
) => Object
multiValue function (
Object,
Object
) => Object
multiValueLabel function (
Object,
Object
) => Object
multiValueRemove function (
Object,
Object
) => Object
noOptionsMessage function (
Object,
Object
) => Object
option function (
Object,
Object
) => Object
placeholder function (
Object,
Object
) => Object
singleValue function (
Object,
Object
) => Object
valueContainer required function (
Object,
Object
) => Object
}>

theme union

Theme modifier method

One of <
{
borderRadius number required
colors object required Object
spacing required {
baseUnit number required
controlHeight number required
menuGutter number required
}
},
({
borderRadius number required
colors object required Object
spacing required {
baseUnit number required
controlHeight number required
menuGutter number required
}
}) => {
borderRadius number required
colors object required Object
spacing required {
baseUnit number required
controlHeight number required
menuGutter number required
}
}
>

tabIndex string = "0"

Sets the tabIndex attribute on the input

tabSelectsValue boolean = true

Select the currently focused option when the user presses tab

value union

The value of the select; reflected by the selected option

One of <
Object,
Array<Object>,
null,
undefined
>

form string

Sets the form attribute on the input

Async props

These props are included with in both the Async and AsyncCreatable select. For more on using async selects, see the async select documentation

defaultOptions union = false

The default set of options to show before the user starts searching. When set to true, the results for loadOptions('') will be autoloaded.

One of <
Array<Object>,
boolean
>

cacheOptions any = false

If cacheOptions is truthy, then the loaded data will be cached. The cache will remain until cacheOptions changes value.

loadOptions function

Function that returns a promise, which is the set of options to be used once the promise resolves.

function (
string,
(Array<Object>) => undefined
) => One of <
Promise<*>,
undefined
>

onInputChange function

Same behaviour as for Select

function (
string,
{
action required One of <
"set-value",
"input-change",
"input-blur",
"menu-close"
>
}
) => undefined

inputValue string

Same behaviour as for Select

isLoading boolean = false

Will cause the select to be displayed in the loading state, even if the Async select is not currently waiting for loadOptions to resolve

Creatable props

These props are included with in both the Creatable and AsyncCreatable select. For more on using creatable selects, see the creatable select documentation

allowCreateWhileLoading boolean = false

Allow options to be created while the isLoading prop is true. Useful to prevent the "create new ..." option being displayed while async results are still being loaded.

createOptionPosition union

Sets the position of the createOption element in your options list. Defaults to 'last'

One of <
"first",
"last"
>

formatCreateLabel function = (inputValue) => undefined

Gets the label for the "create new ..." option in the menu. Is given the current input value.

(string) => react.Node

isValidNewOption function = (inputValue, selectValue, selectOptions) => undefined

Determines whether the "create new ..." option should be displayed based on the current input value, select value and options array.

function (
string,
Array<Object>,
Array<Object>
) => boolean

getNewOptionData function = (inputValue, optionLabel) => undefined

Returns the data for the new option when it is created. Used to display the value, and is passed to onChange.

function (
string,
react.Node
) => Object

onCreateOption function

If provided, this will be called with the input value when a new option is created, and onChange will not be called. Use this when you need more control over what happens when new options are created.

(string) => undefined

createOptionPosition union = "last"

Sets the position of the createOption element in your options list. Defaults to 'last'

One of <
"first",
"last"
>

name string

Name of the HTML Input (optional - without this, no input will be rendered)

options Array<object>

Array<Object>

inputValue string

value union

One of <
Object,
Array<Object>,
null,
undefined
>

isLoading boolean

isMulti boolean

onChange function

function (
One of <
Object,
Array<Object>,
null,
undefined
>,
{
action required One of <
"select-option",
"deselect-option",
"remove-value",
"pop-value",
"set-value",
"clear",
"create-option"
>
}
) => undefined

Replacing Components

React-Select allows you to augment layout and functionality by replacing the default components with your own, using the components property. These components are given all the current props and state letting you achieve anything you dream up. For more information in replacing components see the components documentation

Inner Ref

Some components are passed an innerRef property to facilitate for internally managed behaviour within the base select. This should be assigned to the ref property of the relevant dom element. i.e.

const CustomOptionComponent = ({ innerProps, innerRef }) =>
(<div ref={innerRef} {...innerProps} />)

Inner Props

All functional properties that the component needs are provided in innerProps which you must spread.

Components

IMPORTANT NOTE The below props are provided automatically by react-select when these components are passed into the components object above. Knowing their API is most necessary if you intend to provide your own components, to understand what information they will be handed.

ClearIndicator

clearValue function

() => undefined

className string

cx function

function (
One of <
One of <
Object,
undefined
>,
undefined
>,
One of <
string,
undefined
>
) => One of <
string,
undefined
>

getStyles function

Get the styles of a particular part of the select. Pass in the name of the property as the first argument, and the current props as the second argument. See the styles object for the properties available.

(string, any) => Object

theme object

{
borderRadius number required
colors object required Object
spacing required {
baseUnit number required
controlHeight number required
menuGutter number required
}
}

getValue function

() => One of <
Object,
Array<Object>,
null,
undefined
>

hasValue boolean

isMulti boolean

options Array<object>

Array<Object>

selectOption function

(Object) => undefined

selectProps any

setValue function

function (
One of <
Object,
Array<Object>,
null,
undefined
>,
One of <
"select-option",
"deselect-option",
"remove-value",
"pop-value",
"set-value",
"clear",
"create-option"
>
) => undefined

children import

The children to be rendered inside the indicator.

react.Node

innerProps any

Props that will be passed on to the children.

isFocused boolean

The focused state of the select.

isRtl boolean

Whether the text is right to left

Control

clearValue function

() => undefined

className string

cx function

function (
One of <
One of <
Object,
undefined
>,
undefined
>,
One of <
string,
undefined
>
) => One of <
string,
undefined
>

getStyles function

Get the styles of a particular part of the select. Pass in the name of the property as the first argument, and the current props as the second argument. See the styles object for the properties available.

(string, any) => Object

theme object

{
borderRadius number required
colors object required Object
spacing required {
baseUnit number required
controlHeight number required
menuGutter number required
}
}

getValue function

() => One of <
Object,
Array<Object>,
null,
undefined
>

hasValue boolean

isMulti boolean

options Array<object>

Array<Object>

selectOption function

(Object) => undefined

selectProps any

setValue function

function (
One of <
Object,
Array<Object>,
null,
undefined
>,
One of <
"select-option",
"deselect-option",
"remove-value",
"pop-value",
"set-value",
"clear",
"create-option"
>
) => undefined

getStyles function

Get the styles of a particular part of the select. Pass in the name of the property as the first argument, and the current props as the second argument. See the styles object for the properties available.

(string, any) => Object

theme object

{
borderRadius number required
colors object required Object
spacing required {
baseUnit number required
controlHeight number required
menuGutter number required
}
}

isDisabled boolean

Whether the select is disabled.

isFocused boolean

Whether the select is focused.

menuIsOpen boolean

Whether the select is expanded.

children import

Children to render.

react.Node

innerRef react.ElementRef<*>

react.ElementRef<*>

innerProps object

The mouse down event and the innerRef to pass down to the controller element.

{
onMouseDown function required (SyntheticMouseEvent<HTMLElement>) => undefined
}

DropdownIndicator

clearValue function

() => undefined

className string

cx function

function (
One of <
One of <
Object,
undefined
>,
undefined
>,
One of <
string,
undefined
>
) => One of <
string,
undefined
>

getStyles function

Get the styles of a particular part of the select. Pass in the name of the property as the first argument, and the current props as the second argument. See the styles object for the properties available.

(string, any) => Object

theme object

{
borderRadius number required
colors object required Object
spacing required {
baseUnit number required
controlHeight number required
menuGutter number required
}
}

getValue function

() => One of <
Object,
Array<Object>,
null,
undefined
>

hasValue boolean

isMulti boolean

options Array<object>

Array<Object>

selectOption function

(Object) => undefined

selectProps any

setValue function

function (
One of <
Object,
Array<Object>,
null,
undefined
>,
One of <
"select-option",
"deselect-option",
"remove-value",
"pop-value",
"set-value",
"clear",
"create-option"
>
) => undefined

children import

The children to be rendered inside the indicator.

react.Node

innerProps any

Props that will be passed on to the children.

isFocused boolean

The focused state of the select.

isRtl boolean

Whether the text is right to left

Group

clearValue function

() => undefined

className string

cx function

function (
One of <
One of <
Object,
undefined
>,
undefined
>,
One of <
string,
undefined
>
) => One of <
string,
undefined
>

getStyles function

Get the styles of a particular part of the select. Pass in the name of the property as the first argument, and the current props as the second argument. See the styles object for the properties available.

(string, any) => Object

theme object

{
borderRadius number required
colors object required Object
spacing required {
baseUnit number required
controlHeight number required
menuGutter number required
}
}

getValue function

() => One of <
Object,
Array<Object>,
null,
undefined
>

hasValue boolean

isMulti boolean

options Array<object>

Array<Object>

selectOption function

(Object) => undefined

selectProps any

setValue function

function (
One of <
Object,
Array<Object>,
null,
undefined
>,
One of <
"select-option",
"deselect-option",
"remove-value",
"pop-value",
"set-value",
"clear",
"create-option"
>
) => undefined

children import

The children to be rendered.

react.Node

Heading react.ComponentType<any>

Component to wrap the label, recieves headingProps.

react.ComponentType<any>

headingProps any

Props to pass to Heading.

label import

Label to be displayed in the heading component.

react.Node

GroupHeading

Group Heading can be any component.

IndicatorsContainer

clearValue function

() => undefined

className string

cx function

function (
One of <
One of <
Object,
undefined
>,
undefined
>,
One of <
string,
undefined
>
) => One of <
string,
undefined
>

getStyles function

Get the styles of a particular part of the select. Pass in the name of the property as the first argument, and the current props as the second argument. See the styles object for the properties available.

(string, any) => Object

theme object

{
borderRadius number required
colors object required Object
spacing required {
baseUnit number required
controlHeight number required
menuGutter number required
}
}

getValue function

() => One of <
Object,
Array<Object>,
null,
undefined
>

hasValue boolean

isMulti boolean

options Array<object>

Array<Object>

selectOption function

(Object) => undefined

selectProps any

setValue function

function (
One of <
Object,
Array<Object>,
null,
undefined
>,
One of <
"select-option",
"deselect-option",
"remove-value",
"pop-value",
"set-value",
"clear",
"create-option"
>
) => undefined

isRtl boolean

Whether the text should be rendered right to left.

children import

The children to be rendered.

react.Node

IndicatorSeparator

clearValue function

() => undefined

className string

cx function

function (
One of <
One of <
Object,
undefined
>,
undefined
>,
One of <
string,
undefined
>
) => One of <
string,
undefined
>

getStyles function

Get the styles of a particular part of the select. Pass in the name of the property as the first argument, and the current props as the second argument. See the styles object for the properties available.

(string, any) => Object

theme object

{
borderRadius number required
colors object required Object
spacing required {
baseUnit number required
controlHeight number required
menuGutter number required
}
}

getValue function

() => One of <
Object,
Array<Object>,
null,
undefined
>

hasValue boolean

isMulti boolean

options Array<object>

Array<Object>

selectOption function

(Object) => undefined

selectProps any

setValue function

function (
One of <
Object,
Array<Object>,
null,
undefined
>,
One of <
"select-option",
"deselect-option",
"remove-value",
"pop-value",
"set-value",
"clear",
"create-option"
>
) => undefined

children import

The children to be rendered inside the indicator.

react.Node

innerProps any

Props that will be passed on to the children.

isFocused boolean

The focused state of the select.

isRtl boolean

Whether the text is right to left

Input

getStyles function

Get the styles of a particular part of the select. Pass in the name of the property as the first argument, and the current props as the second argument. See the styles object for the properties available.

(string, any) => Object

theme object

{
borderRadius number required
colors object required Object
spacing required {
baseUnit number required
controlHeight number required
menuGutter number required
}
}

cx function

function (
One of <
Object,
undefined
>,
string
) => One of <
string,
undefined
>

innerRef function

Reference to the internal element

(react.ElementRef<*>) => undefined

isHidden boolean

Set whether the input should be visible. Does not affect input size.

isDisabled boolean

Whether the input is disabled

className string

form string

The ID of the form that the input belongs to

LoadingIndicator

innerProps any

Props that will be passed on to the children.

isFocused boolean

The focused state of the select.

isRtl boolean

Whether the text is right to left

clearValue function

() => undefined

className string

cx function

function (
One of <
One of <
Object,
undefined
>,
undefined
>,
One of <
string,
undefined
>
) => One of <
string,
undefined
>

getStyles function

Get the styles of a particular part of the select. Pass in the name of the property as the first argument, and the current props as the second argument. See the styles object for the properties available.

(string, any) => Object

theme object

{
borderRadius number required
colors object required Object
spacing required {
baseUnit number required
controlHeight number required
menuGutter number required
}
}

getValue function

() => One of <
Object,
Array<Object>,
null,
undefined
>

hasValue boolean

isMulti boolean

options Array<object>

Array<Object>

selectOption function

(Object) => undefined

selectProps any

setValue function

function (
One of <
Object,
Array<Object>,
null,
undefined
>,
One of <
"select-option",
"deselect-option",
"remove-value",
"pop-value",
"set-value",
"clear",
"create-option"
>
) => undefined

size number

Set size of the container.

Menu

clearValue function

() => undefined

className string

cx function

function (
One of <
One of <
Object,
undefined
>,
undefined
>,
One of <
string,
undefined
>
) => One of <
string,
undefined
>

getStyles function

Get the styles of a particular part of the select. Pass in the name of the property as the first argument, and the current props as the second argument. See the styles object for the properties available.

(string, any) => Object

theme object

{
borderRadius number required
colors object required Object
spacing required {
baseUnit number required
controlHeight number required
menuGutter number required
}
}

getValue function

() => One of <
Object,
Array<Object>,
null,
undefined
>

hasValue boolean

isMulti boolean

options Array<object>

Array<Object>

selectOption function

(Object) => undefined

selectProps any

setValue function

function (
One of <
Object,
Array<Object>,
null,
undefined
>,
One of <
"select-option",
"deselect-option",
"remove-value",
"pop-value",
"set-value",
"clear",
"create-option"
>
) => undefined

getPortalPlacement function

Callback to update the portal after possible flip.

({
placement union required One of <
"bottom",
"top",
null
>
maxHeight number required
}) => undefined

innerProps object

Props to be passed to the menu wrapper.

Object

maxMenuHeight number

Set the maximum height of the menu.

menuPlacement union

Set whether the menu should be at the top, at the bottom. The auto options sets it to bottom.

One of <
"auto",
"bottom",
"top"
>

menuPosition union

The CSS position value of the menu, when "fixed" extra layout management is required

One of <
"absolute",
"fixed"
>

minMenuHeight number

Set the minimum height of the menu.

menuShouldScrollIntoView boolean

Set whether the page should scroll to show the menu.

innerRef react.ElementRef<*>

Reference to the internal element, consumed by the MenuPlacer component

react.ElementRef<*>

children react.Element<*>

The children to be rendered.

react.Element<*>

MenuList

clearValue function

() => undefined

className string

cx function

function (
One of <
One of <
Object,
undefined
>,
undefined
>,
One of <
string,
undefined
>
) => One of <
string,
undefined
>

getStyles function

Get the styles of a particular part of the select. Pass in the name of the property as the first argument, and the current props as the second argument. See the styles object for the properties available.

(string, any) => Object

theme object

{
borderRadius number required
colors object required Object
spacing required {
baseUnit number required
controlHeight number required
menuGutter number required
}
}

getValue function

() => One of <
Object,
Array<Object>,
null,
undefined
>

hasValue boolean

isMulti boolean

options Array<object>

Array<Object>

selectOption function

(Object) => undefined

selectProps any

setValue function

function (
One of <
Object,
Array<Object>,
null,
undefined
>,
One of <
"select-option",
"deselect-option",
"remove-value",
"pop-value",
"set-value",
"clear",
"create-option"
>
) => undefined

children import

The children to be rendered.

react.Node

innerRef react.Ref<*>

Inner ref to DOM Node

react.Ref<*>

isMulti boolean

Set classname for isMulti

maxHeight number

Set the max height of the Menu component

LoadingMessage

clearValue function

() => undefined

className string

cx function

function (
One of <
One of <
Object,
undefined
>,
undefined
>,
One of <
string,
undefined
>
) => One of <
string,
undefined
>

getStyles function

Get the styles of a particular part of the select. Pass in the name of the property as the first argument, and the current props as the second argument. See the styles object for the properties available.

(string, any) => Object

theme object

{
borderRadius number required
colors object required Object
spacing required {
baseUnit number required
controlHeight number required
menuGutter number required
}
}

getValue function

() => One of <
Object,
Array<Object>,
null,
undefined
>

hasValue boolean

isMulti boolean

options Array<object>

Array<Object>

selectOption function

(Object) => undefined

selectProps any

setValue function

function (
One of <
Object,
Array<Object>,
null,
undefined
>,
One of <
"select-option",
"deselect-option",
"remove-value",
"pop-value",
"set-value",
"clear",
"create-option"
>
) => undefined

children import

The children to be rendered.

react.Node

innerProps object

Props to be passed on to the wrapper.

Object

NoOptionsMessage

clearValue function

() => undefined

className string

cx function

function (
One of <
One of <
Object,
undefined
>,
undefined
>,
One of <
string,
undefined
>
) => One of <
string,
undefined
>

getStyles function

Get the styles of a particular part of the select. Pass in the name of the property as the first argument, and the current props as the second argument. See the styles object for the properties available.

(string, any) => Object

theme object

{
borderRadius number required
colors object required Object
spacing required {
baseUnit number required
controlHeight number required
menuGutter number required
}
}

getValue function

() => One of <
Object,
Array<Object>,
null,
undefined
>

hasValue boolean

isMulti boolean

options Array<object>

Array<Object>

selectOption function

(Object) => undefined

selectProps any

setValue function

function (
One of <
Object,
Array<Object>,
null,
undefined
>,
One of <
"select-option",
"deselect-option",
"remove-value",
"pop-value",
"set-value",
"clear",
"create-option"
>
) => undefined

children import

The children to be rendered.

react.Node

innerProps object

Props to be passed on to the wrapper.

Object

MultiValue

clearValue function

() => undefined

className string

cx function

function (
One of <
One of <
Object,
undefined
>,
undefined
>,
One of <
string,
undefined
>
) => One of <
string,
undefined
>

getStyles function

Get the styles of a particular part of the select. Pass in the name of the property as the first argument, and the current props as the second argument. See the styles object for the properties available.

(string, any) => Object

theme object

{
borderRadius number required
colors object required Object
spacing required {
baseUnit number required
controlHeight number required
menuGutter number required
}
}

getValue function

() => One of <
Object,
Array<Object>,
null,
undefined
>

hasValue boolean

isMulti boolean

options Array<object>

Array<Object>

selectOption function

(Object) => undefined

selectProps any

setValue function

function (
One of <
Object,
Array<Object>,
null,
undefined
>,
One of <
"select-option",
"deselect-option",
"remove-value",
"pop-value",
"set-value",
"clear",
"create-option"
>
) => undefined

children import

react.Node

components any

cropWithEllipsis boolean

data any

innerProps any

isFocused boolean

isDisabled boolean

removeProps object

{
onTouchEnd function required (any) => undefined
onClick function required (any) => undefined
onMouseDown function required (any) => undefined
}

MultiValueContainer

children import

react.Node

data any

innerProps object

{
className string
}

selectProps any

MultiValueLabel

children import

react.Node

data any

innerProps object

{
className string
}

selectProps any

MultiValueRemove

children import

react.Node

data any

innerProps object

{
className string
}

selectProps any

Option

getStyles function

Get the styles of a particular part of the select. Pass in the name of the property as the first argument, and the current props as the second argument. See the styles object for the properties available.

(string, any) => Object

theme object

{
borderRadius number required
colors object required Object
spacing required {
baseUnit number required
controlHeight number required
menuGutter number required
}
}

clearValue function

() => undefined

className string

cx function

function (
One of <
One of <
Object,
undefined
>,
undefined
>,
One of <
string,
undefined
>
) => One of <
string,
undefined
>

getStyles function

Get the styles of a particular part of the select. Pass in the name of the property as the first argument, and the current props as the second argument. See the styles object for the properties available.

(string, any) => Object

theme object

{
borderRadius number required
colors object required Object
spacing required {
baseUnit number required
controlHeight number required
menuGutter number required
}
}

getValue function

() => One of <
Object,
Array<Object>,
null,
undefined
>

hasValue boolean

isMulti boolean

options Array<object>

Array<Object>

selectOption function

(Object) => undefined

selectProps any

setValue function

function (
One of <
Object,
Array<Object>,
null,
undefined
>,
One of <
"select-option",
"deselect-option",
"remove-value",
"pop-value",
"set-value",
"clear",
"create-option"
>
) => undefined

isDisabled boolean

Whether the option is disabled.

isFocused boolean

Whether the option is focused.

isSelected boolean

Whether the option is selected.

children import

The children to be rendered.

react.Node

innerRef react.Ref<*>

Inner ref to DOM Node

react.Ref<*>

innerProps object

props passed to the wrapping element for the group.

{
id string required
key string required
onClick required MouseEventHandler
onMouseOver required MouseEventHandler
tabIndex number required
}

label string

Text to be displayed representing the option.

type string

ype is used by the menu to determine whether this is an option or a group. In the case of option this is always option.

data any

The data of the selected option.

Placeholder

clearValue function

() => undefined

className string

cx function

function (
One of <
One of <
Object,
undefined
>,
undefined
>,
One of <
string,
undefined
>
) => One of <
string,
undefined
>

getStyles function

Get the styles of a particular part of the select. Pass in the name of the property as the first argument, and the current props as the second argument. See the styles object for the properties available.

(string, any) => Object

theme object

{
borderRadius number required
colors object required Object
spacing required {
baseUnit number required
controlHeight number required
menuGutter number required
}
}

getValue function

() => One of <
Object,
Array<Object>,
null,
undefined
>

hasValue boolean

isMulti boolean

options Array<object>

Array<Object>

selectOption function

(Object) => undefined

selectProps any

setValue function

function (
One of <
Object,
Array<Object>,
null,
undefined
>,
One of <
"select-option",
"deselect-option",
"remove-value",
"pop-value",
"set-value",
"clear",
"create-option"
>
) => undefined

children import

The children to be rendered.

react.Node

innerProps object

props passed to the wrapping element for the group.

Object

SelectContainer

clearValue function

() => undefined

className string

cx function

function (
One of <
One of <
Object,
undefined
>,
undefined
>,
One of <
string,
undefined
>
) => One of <
string,
undefined
>

getStyles function

Get the styles of a particular part of the select. Pass in the name of the property as the first argument, and the current props as the second argument. See the styles object for the properties available.

(string, any) => Object

theme object

{
borderRadius number required
colors object required Object
spacing required {
baseUnit number required
controlHeight number required
menuGutter number required
}
}

getValue function

() => One of <
Object,
Array<Object>,
null,
undefined
>

hasValue boolean

isMulti boolean

options Array<object>

Array<Object>

selectOption function

(Object) => undefined

selectProps any

setValue function

function (
One of <
Object,
Array<Object>,
null,
undefined
>,
One of <
"select-option",
"deselect-option",
"remove-value",
"pop-value",
"set-value",
"clear",
"create-option"
>
) => undefined

isDisabled boolean

Whether the select is disabled.

isRtl boolean

Whether the text in the select is indented from right to left.

children import

The children to be rendered.

react.Node

innerProps object

Inner props to be passed down to the container.

{
onKeyDown required (SyntheticKeyboardEvent<HTMLElement>) => undefined
}

SingleValue

clearValue function

() => undefined

className string

cx function

function (
One of <
One of <
Object,
undefined
>,
undefined
>,
One of <
string,
undefined
>
) => One of <
string,
undefined
>

getStyles function

Get the styles of a particular part of the select. Pass in the name of the property as the first argument, and the current props as the second argument. See the styles object for the properties available.

(string, any) => Object

theme object

{
borderRadius number required
colors object required Object
spacing required {
baseUnit number required
controlHeight number required
menuGutter number required
}
}

getValue function

() => One of <
Object,
Array<Object>,
null,
undefined
>

hasValue boolean

isMulti boolean

options Array<object>

Array<Object>

selectOption function

(Object) => undefined

selectProps any

setValue function

function (
One of <
Object,
Array<Object>,
null,
undefined
>,
One of <
"select-option",
"deselect-option",
"remove-value",
"pop-value",
"set-value",
"clear",
"create-option"
>
) => undefined

children React$Node

The children to be rendered.

React$Node

data any

The data of the selected option rendered in the Single Value component.

innerProps any

Props passed to the wrapping element for the group.

isDisabled boolean

Whether this is disabled.

ValueContainer

clearValue function

() => undefined

className string

cx function

function (
One of <
One of <
Object,
undefined
>,
undefined
>,
One of <
string,
undefined
>
) => One of <
string,
undefined
>

getStyles function

Get the styles of a particular part of the select. Pass in the name of the property as the first argument, and the current props as the second argument. See the styles object for the properties available.

(string, any) => Object

theme object

{
borderRadius number required
colors object required Object
spacing required {
baseUnit number required
controlHeight number required
menuGutter number required
}
}

getValue function

() => One of <
Object,
Array<Object>,
null,
undefined
>

hasValue boolean

isMulti boolean

options Array<object>

Array<Object>

selectOption function

(Object) => undefined

selectProps any

setValue function

function (
One of <
Object,
Array<Object>,
null,
undefined
>,
One of <
"select-option",
"deselect-option",
"remove-value",
"pop-value",
"set-value",
"clear",
"create-option"
>
) => undefined

isMulti boolean

Set when the value container should hold multiple values

hasValue boolean

Whether the value container currently holds a value.

children import

The children to be rendered.

react.Node

Copyright © Jed Watson, 2019. MIT Licensed.