Components

The main feature of this library is providing consumers with the building blocks necessary to create their component.

The following components are customisable and switchable:

• ClearIndicator
• Control
• DropdownIndicator
• DownChevron
• CrossIcon
• Group
• GroupHeading
• IndicatorsContainer
• IndicatorSeparator
• Input
• LoadingIndicator
• Menu
• MenuList
• MenuPortal
• LoadingMessage
• NoOptionsMessage
• MultiValue
• MultiValueContainer
• MultiValueLabel
• MultiValueRemove
• Option
• Placeholder
• SelectContainer
• SingleValue
• ValueContainer

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.

Inner Ref

Some components also take an innerRef prop that react-select needs in order to manage internal behaviour. Please assign this to the ref property of the relevant react-element. For example:

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

Inner Props

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

Common Props

Every component receives commonProps which are spread onto the component. These include:

• clearValue
• getStyles
• getValue
• hasValue
• isMulti
• isRtl
• options
• selectOption
• setValue
• selectProps

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

const CustomOption = ({ innerProps, isDisabled }) =>
  !isDisabled ? (
    <div {...innerProps}>{/* your component internals */}</div>
  ) : null;

class Component extends React.Component {
  render() {
    return <Select components={{ Option: CustomOption }} />;
  }
}

Adjusting the Styling

The styles prop allows you to pass styles to a particular component, without replacing the entire component. If you only want to change styling, you should start by using the styles prop.

Replaceable components

ClearIndicator

The indicator presented to clear the values from the component. The default component is a cross. The conditions under which the indicator will not be rendered when:

• When isClearable is false, or when isMulti is false, and isClearable is undefined
• When the select is disabled
• When the select has no value
• When the select is loading

See props docs for more details

Control

The second highest level wrapper around the components. It is responsible for the positioning of the ValueContainer and IndicatorsContainer. It is followed by the Menu.

See props docs for more details

Dropdown Indicator

The indicator for opening the select, designed to indicate to users that this is a select. By default it is a chevron pointed down.

See props docs for more details

Group

The wrapper around each group if the Select has groups in its data. The default component is responsible both for mapping its options, as well as rendering its data into the GroupHeading.

See props docs for more details

GroupHeading

Component that renders the data of a group.

See props docs for more details

IndicatorsContainer

Wraps the indicators. This is one of the two components directly under the control. The indicators that react-select will check to render by are:

• Clear Indicator
• Loading Indicator
• Dropdown Indicator

See props docs for more details

Indicator Separator

Component directly to the the inner side of the Dropdown Indicator. By default it is a line to act as a visual separator.

See props docs for more details

Input

Input to render when an input is required. If the select is not searchable, a dummy input is rendered instead. If the select is disabled, a div of the correct size and shape is rendered.

All provided inputs are given aria attributes to ensure the input is accessible by default.

See props docs for more details

LoadingIndicator

Loading indicator to be displayed in the Indicators Container when isLoading] is true. By default it is three dots.

See props docs for more details

Menu

The wrapper for the dropdown menu in the select. It is responsible for wrapping the menu items. If you want to modify the options themselves, you should use the Option component.

See props docs for more details

MenuList

Inner wrapper for the menu. It directly wraps around the returned options.

See props docs for more details

LoadingMessage

Message to display in the menu when there are no options and isLoading is true. By default it is 'Loading...'

See props docs for more details

NoOptionsMessage

Message to be displayed in the menu if there are no options passed in.

See props docs for more details

MultiValue

Component used to display a selected option in the input when isMulti is true. Takes responsibility for rendering the MultiValueContainer, MultiValueLabel, and MultiValueRemove.

MultiValueContainer

Wraps the Label and Remove in a Multi Value

See props docs for more details

MultiValueLabel

Receives the value of the option and is responsible for rendering it to the input.

See props docs for more details

MultiValueRemove

Receives an onClick to remove the selected item. By default it is a cross.

See props docs for more details

Option

Component responsible for displaying an option in the menu.

See props docs for more details

Placeholder

Component to be displayed in the input when nothing is selected. By default it is the text 'Select...'

See props docs for more details

SelectContainer

The wrapper around the entire select component.

See props docs for more details

SingleValue

The component that displays the selected value in the input for a single select.

See props docs for more details

ValueContainer

Container responsible for loading the placeholder value and the input.

See props docs for more details