### Install react-select with npm

Source: https://react-select.com/home

Use this command to install the react-select package using npm.

```bash
npm i --save react-select
```

--------------------------------

### Install react-select with Yarn

Source: https://react-select.com/home

Use this command to install the react-select package using Yarn.

```bash
yarn add react-select
```

--------------------------------

### Advanced Creatable Example with onCreateOption

Source: https://react-select.com/creatable

This example uses the `onCreateOption` prop to handle new options. It simulates a backend delay by disabling the input for a second before adding the new option.

```javascript
import React from 'react';
import Creatable from 'react-select/creatable';

const createOption = (label) => ({
  label,
  value: label.toLowerCase().replace(/[^a-z0-9]+ /g, '-'),
});

const makeCreatable = (SelectComponent) =>
  class MakeCreatable extends React.Component {
    state = {
      options: colourOptions,
      value: undefined,
    };
    handleChange = (value, actionMeta) => {
      if (actionMeta.action === 'create-option') {
        this.setState(state => ({
          options: [...state.options, createOption(actionMeta.option.label)],
        }));
      }
    };
    render() {
      return (
        <SelectComponent
          isClearable
          {...this.props}
          onChange={this.handleChange}
          options={this.state.options}
        />
      );
    }
  };

const AdvancedCreatable = makeCreatable(Creatable);

export default AdvancedCreatable;
```

--------------------------------

### Creatable Example

Source: https://react-select.com/creatable

Basic example of using the Creatable component for a single select input.

```javascript
import React from 'react';
import Creatable from 'react-select/creatable';

const CreatableSingle = () => (
  <Creatable options={colourOptions} onChange={colourOptions => console.log(colourOptions)}
    isMulti />
);

export default CreatableSingle;
```

--------------------------------

### Creatable Multiselect Example

Source: https://react-select.com/creatable

Example demonstrating the Creatable component used for a multiselect input.

```javascript
import React from 'react';
import Creatable from 'react-select/creatable';

const CreatableMulti = () => (
  <Creatable options={colourOptions} onChange={colourOptions => console.log(colourOptions)}
    isMulti />
);

export default CreatableMulti;
```

--------------------------------

### Basic Select Example

Source: https://react-select.com/advanced

A fundamental example of the `Select` component, showcasing basic usage with options and a clearable interface.

```jsx
import Select from 'react-select';

const colourOptions = [
  { value: 'ocean', label: 'Ocean' },
  { value: 'blue', label: 'Blue' },
  { value: 'purple', label: 'Purple' },
  { value: 'red', label: 'Red' },
  { value: 'orange', label: 'Orange' },
  { value: 'yellow', label: 'Yellow' },
  { value: 'green', label: 'Green' },
  { value: 'white', label: 'White' },
  { value: 'black', label: 'Black' },
];

function SelectBasic() {
  return <Select isClearable options={colourOptions} />;
}
```

--------------------------------

### Creatable Select Example

Source: https://react-select.com/advanced

Demonstrates the `Creatable` select component, which allows users to create new options on the fly. It requires importing `Creatable` from `react-select/creatable`.

```jsx
import CreatableSelect from 'react-select/creatable';

function CreatableSingle() {
  return <CreatableSelect isClearable options={colourOptions} />;
}
```

--------------------------------

### Async Select Example

Source: https://react-select.com/advanced

Illustrates the `Async` select component for fetching options asynchronously. It requires importing `Async` from `react-select/async` and providing an `loadOptions` function.

```jsx
import AsyncSelect from 'react-select/async';

function GitHubUser() {
  return (
    <AsyncSelect
      cacheOptions
      defaultOptions
      loadOptions={promiseOptions}
    />
  );
}
```

--------------------------------

### Async Creatable Example

Source: https://react-select.com/creatable

Example showcasing the combined asynchronous and creatable variant of the select input. Imported from `react-select/async-creatable`.

```javascript
import React from 'react';
import AsyncCreatableSelect from 'react-select/async-creatable';

const filterColors = (inputValue) => {
  return colourOptions.filter(i =>
    i.label.toLowerCase().includes(inputValue.toLowerCase())
  );
};

const promiseOptions = inputValue =>
  new Promise(resolve => {
    setTimeout(() => {
      resolve(filterColors(inputValue));
    }, 1000);
  });

const AsyncCreatable = () => (
  <AsyncCreatableSelect cacheOptions defaultOptions isClearable isMulti options={colourOptions} loadOptions={promiseOptions} />
);

export default AsyncCreatable;
```

--------------------------------

### Custom Filter Logic with createFilter

Source: https://react-select.com/advanced

Demonstrates how to use the `createFilter` function to customize the filtering logic for React Select. This example shows how to create a filter with specific configurations.

```javascript
Ocean
Ignore CaseIgnore AccentsTrimMatch from the start
```

--------------------------------

### Custom Option Component Styling

Source: https://react-select.com/styles

Example of creating a custom Option component using cx and getStyles for dynamic styling based on component state like isDisabled, isFocused, and isSelected.

```javascript
import { css } from 'emotion';

const CustomOption = ({ cx, children, getStyles, innerRef, ...props }) => (
  <div
    ref={innerRef}
    className={cx(
      css(getStyles('option', props)),
      {
        'option': true,
        'option--is-disabled': isDisabled,
        'option--is-focused': isFocused,
        'option--is-selected': isSelected,
      }
    )}
  >
    {children}
  </div>
)
```

--------------------------------

### Date Picker Select Recipe

Source: https://react-select.com/advanced

This example demonstrates how to configure react-select to function as a date picker using custom components and functions. It supports natural language date inputs.

```jsx
function DatePickerSelect() {
  return (
    <Select
      components={DateComponents}
      inputValue={inputValue}
      onChange={handleDateChange}
      onInputChange={handleInputChange}
      // ... other props
    />
  )
}
```

--------------------------------

### Custom Option Component with Emotion 9

Source: https://react-select.com/upgrade

Example of creating a custom option component using Emotion 9 before upgrading to react-select v3.0.0.

```jsx
import { css } from 'emotion'

const customOption = ({ cx, className, getStyles, _ }) =>
  <div
     classNames={cx(
       css(getStyles('option', props)),
       {
         'option': true,
         'option--is-disabled': isDisabled,
         'option--is-focused': isFocused,
         'option--is-selected': isSelected,
        },
        className
     )}
     {...} 
  >


```

--------------------------------

### getStyles

Source: https://react-select.com/props

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.

```APIDOC
## getStyles

### Description
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.

### Signature
`<Key>(...) => ...`
```

--------------------------------

### Custom Option Component with Emotion 10

Source: https://react-select.com/upgrade

Example of creating a custom option component using Emotion 10 after upgrading to react-select v3.0.0. This version leverages the jsx pragma for emotion.

```jsx
/** @jsx jsx */
import { jsx } from '@emotion/core';

const customOption = ({ cx, className, getStyles, _ }) =>
  <div
    css={getStyles('option', props)}
    classNames={cx(
     {
       'option': true,
       'option--is-disabled': isDisabled,
       'option--is-focused': isFocused,
       'option--is-selected': isSelected,
      },
      className
    )}
    {...} 
  >


```

--------------------------------

### Custom filterOption Function

Source: https://react-select.com/advanced

Provides a custom `filterOption` function to control how options are filtered. This example ensures that new options can be created and that existing options containing the input are always displayed.

```javascript
const filterOption = (candidate, input) => {
  return candidate.data.__isNew__ || candidate.label.includes(input);
};
```

--------------------------------

### Define Custom Option Component in React Select

Source: https://react-select.com/components

Example of creating a custom Option component for React Select. Ensure to assign the innerRef prop to the relevant DOM element and spread innerProps.

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

--------------------------------

### Get Styles for Components

Source: https://react-select.com/styles

The getStyles method retrieves style objects for specific components. It takes a component key (e.g., 'option') and a props object containing relevant state values.

```javascript
(key: string, props: Object) => stylesObject;
```

--------------------------------

### Custom Option Component with InnerRef

Source: https://react-select.com/props

Example of a custom option component that utilizes `innerRef` to assign a DOM element reference. This is useful for managing internal component behavior.

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

--------------------------------

### `options`

Source: https://react-select.com/props

An array of options that populate the select menu.

```APIDOC
## `options`

### Description
Array of options that populate the select menu.

### Type
ReadonlyArray<One of <
Option, 
Group
>>
```

--------------------------------

### Import Animated Components Wrapper

Source: https://react-select.com/home

Import the `makeAnimated` function to create animated wrappers around components. If no arguments are provided, built-in components are wrapped.

```javascript
import makeAnimated from 'react-select/animated';
```

--------------------------------

### Input and Option Handling

Source: https://react-select.com/props

Props for managing the input element, options, and related events.

```APIDOC
## `name`

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

### Type
string

## `noOptionsMessage`

### Description
Text to display when there are no options.

### Type
(...) => ...

## `onBlur`

### Description
Handle blur events on the control.

### Type
(...) => void

## `onFocus`

### Description
Handle focus events on the control.

### Type
(...) => void

## `onKeyDown`

### Description
Handle key down events on the select.

### Type
(...) => void

## `onMenuScrollToTop`

### Description
Fired when the user scrolls to the top of the menu.

### Type
(...) => void

## `onMenuScrollToBottom`

### Description
Fired when the user scrolls to the bottom of the menu.

### Type
(...) => void

## `options`

### Description
Array of options that populate the select menu.

### Type
ReadonlyArray<One of < Option, Group >>

## `pageSize`

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

### Type
number

## `placeholder`

### Description
Placeholder for the select value.

### Type
ReactNode One of < null, string, number, boolean, {}, ReactElement{...}, ReactNodeArray{...}, ReactPortal{...} >

## `screenReaderStatus`

### Description
Status to relay to screen readers.

### Type
(...) => string
```

--------------------------------

### Importing Async Component (v2)

Source: https://react-select.com/upgrade

Demonstrates the previous import method for the Async component in react-select versions prior to v3.0.0.

```javascript
	import { Async } from 'react-select'

```

```javascript
	import Async from 'react-select/lib/Async'

```

--------------------------------

### Import AsyncSelect Component

Source: https://react-select.com/home

Use the `AsyncSelect` component to load options from a remote source as the user types. This is useful for handling large datasets or dynamic options.

```javascript
import AsyncSelect from 'react-select/async';
```

--------------------------------

### options

Source: https://react-select.com/props

The options to display in the select component.

```APIDOC
## options

### Description
The options to display in the select component.

### Type
`ReadonlyArray<One of <Option, Group>>`
```

--------------------------------

### Styling and Theming

Source: https://react-select.com/props

Props for customizing the visual appearance and theme of the select component.

```APIDOC
## `styles`

### Description
Style modifier methods. A basic example can be found at the bottom of the Replacing builtins documentation.

### Type
StylesConfig{...}

## `theme`

### Description
Theme modifier method.

### Type
One of < Theme{...}, (...) => ... >
```

--------------------------------

### `menuIsOpen`

Source: https://react-select.com/props

Programmatically controls whether the menu is open.

```APIDOC
## `menuIsOpen`

### Description
Whether the menu is open.

### Type
boolean
```

--------------------------------

### theme

Source: https://react-select.com/props

The theme object for styling the select component.

```APIDOC
## theme

### Description
The theme object for styling the select component.

### Type
`Theme{...}`
```

--------------------------------

### Importing Async Component (v3)

Source: https://react-select.com/upgrade

Shows the new import path for the Async component in react-select v3.0.0, utilizing the separate entry point.

```javascript
	import AsyncSelect from 'react-select/async'

```

--------------------------------

### `menuShouldScrollIntoView`

Source: https://react-select.com/props

Ensures the menu scrolls into view when it opens.

```APIDOC
## `menuShouldScrollIntoView`

### Description
Whether the menu should be scrolled into view when it opens.

### Type
boolean
```

--------------------------------

### `minMenuHeight`

Source: https://react-select.com/props

Sets the minimum height of the menu before it flips to the opposite placement.

```APIDOC
## `minMenuHeight`

### Description
Minimum height of the menu before flipping.

### Type
number
```

--------------------------------

### about

Source: https://react-select.com/props

Provides a URI to a document that defines the element's properties.

```APIDOC
## about

### Description
URI defining the element's properties.

### Type
`string`
```

--------------------------------

### Menu Properties

Source: https://react-select.com/props

Configuration options related to the dropdown menu's appearance and behavior.

```APIDOC
## `menuPosition`

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

### Type
One of < "absolute", "fixed" >

## `menuPortalTarget`

### Description
Whether the menu should use a portal, and where it should attach. An example can be found in the Portaling documentation.

### Type
One of < null, HTMLElement{...} >

## `menuShouldBlockScroll`

### Description
Whether to block scroll events when the menu is open.

### Type
boolean

## `menuShouldScrollIntoView`

### Description
Whether the menu should be scrolled into view when it opens.

### Type
boolean
```

--------------------------------

### Popout Select Recipe

Source: https://react-select.com/advanced

A recipe for using select in limited space, disabling `controlShouldRenderValue`. It's recommended to also disable `isClearable` and `backspaceRemovesValue` when using this pattern.

```jsx
function PopoutSelect() {
  return (
    <Select
      controlShouldRenderValue={false}
      isClearable={false}
      backspaceRemovesValue={false}
      // ... other props
    />
  )
}
```

--------------------------------

### MenuList Props

Source: https://react-select.com/props

Props to be passed to the menu-list wrapper.

```APIDOC
## MenuList Props

### Description
Props to be passed to the menu-list wrapper.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **innerProps** (DetailedHTMLProps Intersection<...>) - Required - Props to be passed to the menu-list wrapper.
- **className** (string) - Optional - CSS class name for the wrapper.
- **clearValue** (() => void) - Required - Function to clear the current selection.
- **cx** ((...) => string) - Required - Function to generate CSS class names.
- **getStyles** ((<Key>(...) => ...) - Required - Function to get styles for a specific part of the select component.
- **getClassNames** ((<Key>(...) => ...) - Required - Function to get class names for specific parts.
- **getValue** (() => ReadonlyArray<...>) - Required - Function to get the current selected value(s).
- **hasValue** (boolean) - Required - Indicates if the select component has a value.
- **isMulti** (boolean) - Required - Indicates if the select component is in multi-select mode.
- **isRtl** (boolean) - Required - Indicates if the select component is in right-to-left mode.
- **options** (ReadonlyArray<One of <Option, Group>>) - Required - The available options for the select component.
- **selectOption** ((...) => void) - Required - Function to select an option.
- **selectProps** (Props{...}) - Required - Props passed down from the main select component.
- **setValue** ((...) => void) - Required - Function to set the value of the select component.
- **theme** (Theme{...}) - Required - The theme object for styling.
```

--------------------------------

### `openMenuOnFocus`

Source: https://react-select.com/props

Controls whether the menu opens automatically when the Select component receives focus.

```APIDOC
## `openMenuOnFocus`

### Description
Allows control of whether the menu is opened when the Select is focused.

### Type
boolean
```

--------------------------------

### Input Props

Source: https://react-select.com/props

Props for the Input component, which handles user input.

```APIDOC
## Input

### Props

*   **innerRef** ((...) => void) - Reference to the internal element.
*   **isHidden** (boolean) - Required - Set whether the input should be visible. Does not affect input size.
*   **isDisabled** (boolean) - Whether the input is disabled.
*   **form** (string) - The ID of the form that the input belongs to.
*   **inputClassName** (string) - Set className for the input element.
*   **accept** (string)
*   **alt** (string)
*   **autoComplete** (string)
*   **capture** (string | boolean)
*   **checked** (boolean)
*   **disabled** (boolean)
*   **formAction** (string)
*   **formEncType** (string)
*   **formMethod** (string)
*   **formNoValidate** (boolean)
*   **formTarget** (string)
*   **height** (string | number)
*   **list** (string)
*   **max** (string | number)
*   **maxLength** (number)
*   **min** (string | number)
*   **minLength** (number)
*   **multiple** (boolean)
*   **name** (string)
*   **pattern** (string)
*   **placeholder** (string)
*   **readOnly** (boolean)
*   **required** (boolean)
*   **size** (number)
*   **src** (string)
*   **step** (string | number)
*   **type** (One of <"number", "button", "time", "image", "text", "hidden", "month", "password", "Intersection<...>", "checkbox", "radio", "color", "reset", "range", "search", "date", "datetime-local", "email", "file", "submit", "tel", "url", "week">)
*   **value** (string | number | ReadonlyArray<string>)
*   **width** (string | number)
```

--------------------------------

### `isMulti`

Source: https://react-select.com/props

Enables support for selecting multiple options.

```APIDOC
## `isMulti`

### Description
Support multiple selected options.

### Type
IsMulti
```

--------------------------------

### `defaultMenuIsOpen`

Source: https://react-select.com/props

Sets the default state of the menu to be open.

```APIDOC
## `defaultMenuIsOpen`

### Description
Sets the default state of the menu to be open.

### Type
boolean
```

--------------------------------

### `pageSize`

Source: https://react-select.com/props

Determines the number of options to jump when using page up/down keys in the menu.

```APIDOC
## `pageSize`

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

### Type
number
```

--------------------------------

### style

Source: https://react-select.com/props

Applies inline styles to the element.

```APIDOC
## style

### Description
Applies inline CSS styles to the element.

### Type
`CSSProperties`
```

--------------------------------

### Basic React Select Usage

Source: https://react-select.com/home

Import the default export and render the Select component in your React application. Ensure you provide an array of options with 'value' and 'label' properties.

```jsx
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} />
)
```

--------------------------------

### `placeholder`

Source: https://react-select.com/props

Placeholder text displayed when no option is selected.

```APIDOC
## `placeholder`

### Description
Placeholder for the select value.

### Type
ReactNode One of <
null, 
string, 
number, 
boolean, 
{...}, 
ReactElement{...}, 
ReactNodeArray{...}, 
ReactPortal{...}
>
```

--------------------------------

### accessKey

Source: https://react-select.com/props

Provides a shortcut to access an element using the keyboard.

```APIDOC
## accessKey

### Description
Provides a keyboard shortcut to access the element.

### Type
`string`
```

--------------------------------

### Server-Side Rendering with Emotion

Source: https://react-select.com/advanced

React-select uses Emotion for styling, which supports zero-config server-side rendering. Ensure you call `renderToString` from `react-dom/server` or use a framework like Next.js or Gatsby.

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

const html = renderToString(<App />)
```

--------------------------------

### Import Creatable Component

Source: https://react-select.com/home

The `Creatable` component allows users to create new options in addition to selecting existing ones. This is useful for scenarios where users might need to add new values to a list.

```javascript
import Creatable from 'react-select/creatable';
```

--------------------------------

### is

Source: https://react-select.com/props

Specifies that a standard HTML element should behave like a defined custom built-in element.

```APIDOC
## is

### Description
Specifies that a standard HTML element should behave like a defined custom built-in element.

### Type
`string`
```

--------------------------------

### `openMenuOnClick`

Source: https://react-select.com/props

Controls whether the menu opens automatically when the Select component is clicked.

```APIDOC
## `openMenuOnClick`

### Description
Allows control of whether the menu is opened when the Select is clicked.

### Type
boolean
```

--------------------------------

### `getOptionLabel`

Source: https://react-select.com/props

Resolves option data to a string for display as the label, crucial for filtering and screen reader support.

```APIDOC
## `getOptionLabel`

### Description
Resolves option data to a string to be displayed as the label by components.
Note: Failure to resolve to a string type can interfere with filtering and screen reader support.

### Type
(...) => string
```

--------------------------------

### Import Async Component

Source: https://react-select.com/async

Import the Async component and the useAsync hook from 'react-select/async'. This is the primary import for asynchronous functionality.

```javascript
import Async, { useAsync } from 'react-select/async';
```

--------------------------------

### inputMode

Source: https://react-select.com/props

Hints at the type of data that might be entered by the user.

```APIDOC
## inputMode

### Description
Hints at the type of data that might be entered by the user.

### Type
`"text" | "none" | "decimal" | "search" | "email" | "tel" | "url" | "numeric"`
```

--------------------------------

### Wrapping React Select with Generics

Source: https://react-select.com/typescript

Demonstrates how to create a flexible wrapper component for React Select that re-declares and forwards the generics, ensuring type safety for custom implementations.

```typescript
function CustomSelect< 
  Option,
  IsMulti extends boolean = false,
  Group extends GroupBase<Option> = GroupBase<Option>
>(props: Props<Option, IsMulti, Group>) {
  return (
    <Select {...props} theme={(theme) => ({ ...theme, borderRadius: 0 })} />
  );
}
```

--------------------------------

### onChange

Source: https://react-select.com/props

Callback fired when the selected option changes. It receives the selected option and the action performed.

```APIDOC
## onChange

### Description
Callback fired when the selected option changes.

### Signature
`onChange: (newValue: Option | null, action: ActionMeta) => void`
```

--------------------------------

### `loadingMessage`

Source: https://react-select.com/props

Custom message displayed when options are being loaded asynchronously.

```APIDOC
## `loadingMessage`

### Description
Async: Text to display when loading options.

### Type
(...) => ...
```

--------------------------------

### onChange Event Actions

Source: https://react-select.com/advanced

The `onChange` prop provides detailed information about the event that triggered the change, allowing for granular control over component behavior.

```APIDOC
## onChange(value: ValueType, action: ActionType)

### Description

Callback function invoked when the selected value changes. The `action` parameter provides context about the event that triggered the change.

### Method

`onChange`

### Endpoint

N/A (Prop)

### Parameters

- **value** (ValueType) - The current value of the select component.
- **action** (ActionType) - A string indicating the type of action that occurred. Possible values include:
  - '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.

### Request Example

```javascript
const handleChange = (value, action) => {
  console.log(`Action: ${action}, Value:`, value);
};

<Select onChange={handleChange} />
```

### Response

None
```

--------------------------------

### prefix

Source: https://react-select.com/props

Specifies a prefix for CURIEs (Compact URI).

```APIDOC
## prefix

### Description
Specifies a prefix for CURIEs.

### Type
`string`
```

--------------------------------

### Placeholder Props

Source: https://react-select.com/props

Props for the placeholder displayed when no option is selected.

```APIDOC
## Placeholder Props

### `children` ` required`
The children to be rendered.
ReactNode One of <
null,
string,
number,
boolean,
{},
ReactElement{...},
ReactNodeArray{...},
ReactPortal{...}
>
### `innerProps` ` required`
props passed to the wrapping element for the group.
DetailedHTMLProps Intersection<...>
### `isDisabled` ` required`
boolean
### `isFocused` ` required`
boolean
### `className`
string
```

--------------------------------

### Action Types

Source: https://react-select.com/props

These action types are passed as the second argument to the `onChange` handler.

```APIDOC
## Action Types

- `'clear'`
- `'create-option'`
- `'deselect-option'`
- `'pop-value'`
- `'remove-value'`
- `'select-option'`
- `'set-value'`
```

--------------------------------

### resource

Source: https://react-select.com/props

Specifies a URI for the element's value.

```APIDOC
## resource

### Description
Specifies a URI for the element's value.

### Type
`string`
```

--------------------------------

### Compose Styles with cx Utility

Source: https://react-select.com/styles

The cx utility composes emotion style declarations, classNames, and BEM modifiers into a selector string. It accepts an optional prefix, cssKey, state object, and className.

```javascript
(prefix ?: string,
  cssKey?: string,
  state?: {},
  className?: string) => string
```

--------------------------------

### MenuList Props

Source: https://react-select.com/props

Props for customizing the MenuList component.

```APIDOC
## MenuList Props

### `maxHeight`

Sets the maximum height for the MenuList.

### `children`

The options to be rendered within the MenuList.

### `innerRef`

An inner reference to the DOM element of the MenuList.

### `focusedOption`

The currently focused option within the MenuList.
```

--------------------------------

### Menu Props

Source: https://react-select.com/props

Props specifically related to the menu display and behavior.

```APIDOC
## Menu Props

### `innerRef`

Reference to the internal menu element, used by the MenuPlacer component.

### `innerProps`

Props to be passed to the inner menu element.

### `isLoading`

Indicates if the menu is currently in a loading state.

### `placement`

The placement of the menu (e.g., 'top', 'bottom').

### `children`

The content to be rendered within the menu.

### `className`

Custom class name for the menu.

### `minMenuHeight`

Sets the minimum height of the menu.

### `maxMenuHeight`

Sets the maximum height of the menu.

### `menuPlacement`

Determines where the menu is placed relative to the input (e.g., 'bottom', 'auto', 'top').

### `menuPosition`

Specifies the CSS position of the menu (e.g., 'absolute', 'fixed').

### `menuShouldScrollIntoView`

Determines if the page should scroll to bring the menu into view.
```

--------------------------------

### autoFocus

Source: https://react-select.com/props

Automatically focuses the element when the page loads.

```APIDOC
## autoFocus

### Description
Automatically focuses the element on page load.

### Type
`boolean`
```

--------------------------------

### Import Creatable Component

Source: https://react-select.com/creatable

Import the Creatable component and its hook from the react-select/creatable package.

```javascript
import Creatable, { useCreatable } from 'react-select/creatable';
```

--------------------------------

### `classNames`

Source: https://react-select.com/props

Provides class names based on the state for each inner component.

```APIDOC
## `classNames`

### Description
Provide classNames based on state for each inner component.

### Type
ClassNamesConfig{...}
```

--------------------------------

### className

Source: https://react-select.com/props

Assigns a CSS class to the element for styling.

```APIDOC
## className

### Description
Assigns a CSS class to the element.

### Type
`string`
```

--------------------------------

### `isLoading`

Source: https://react-select.com/props

Indicates if the select component is in a loading state, typically for asynchronous operations.

```APIDOC
## `isLoading`

### Description
Is the select in a state of loading (async).

### Type
boolean
```

--------------------------------

### Accessibility and Form Integration

Source: https://react-select.com/props

Props related to accessibility features and integration with HTML forms.

```APIDOC
## `tabIndex`

### Description
Sets the tabIndex attribute on the input.

### Type
number

## `tabSelectsValue`

### Description
Select the currently focused option when the user presses tab.

### Type
boolean

## `unstyled`

### Description
Remove all non-essential styles.

### Type
boolean

## `required`

### Description
Marks the value-holding input as required for form validation.

### Type
boolean

## `form`

### Description
Sets the form attribute on the input.

### Type
string

## `aria-errormessage`

### Description
HTML ID of an element containing an error message related to the input*

### Type
string

## `aria-invalid`

### Description
Indicate if the value entered in the field is invalid *

### Type
One of < boolean, "false", "true", "grammar", "spelling" >

## `aria-label`

### Description
Aria label (for assistive tech).

### Type
string

## `aria-labelledby`

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

### Type
string

## `ariaLiveMessages`

### Description
Customise the messages used by the aria-live component.

### Type
AriaLiveMessages{...}
```

--------------------------------

### Multi-select text input with Enter key

Source: https://react-select.com/creatable

Demonstrates a multi-select text input where new options can be added by pressing the Enter key.

```javascript
import React from 'react';
import Creatable from 'react-select/creatable';

const CreatableMultiInput = () => (
  <Creatable options={colourOptions} onChange={colourOptions => console.log(colourOptions)}
    isMulti />
);

export default CreatableMultiInput;
```

--------------------------------

### selectOption

Source: https://react-select.com/props

Function to select an option in the select component.

```APIDOC
## selectOption

### Description
Function to select an option in the select component.

### Signature
`(...) => void`
```

--------------------------------

### MultiValueLabel Props

Source: https://react-select.com/props

Props for the MultiValueLabel component.

```APIDOC
## MultiValueLabel Props

### Description
Props for the MultiValueLabel component.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **children** (ReactNode One of <null, string, number, boolean, {}, ReactElement{...}, ReactNodeArray{...}, ReactPortal{...}>) - Required - The children to be rendered.
- **data** (any) - Required - The data for the option.
- **innerProps** ({...}) - Required - Props to be passed to the inner wrapper.
- **selectProps** (Props{...}) - Required - Props passed down from the main select component.
```

--------------------------------

### `menuPosition`

Source: https://react-select.com/props

Sets the CSS position value for the menu. 'fixed' requires extra layout management.

```APIDOC
## `menuPosition`

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

### Type
One of <
"absolute", 
"fixed"
>
```

--------------------------------

### `maxMenuHeight`

Source: https://react-select.com/props

Sets the maximum height of the menu before scrolling is enabled.

```APIDOC
## `maxMenuHeight`

### Description
Maximum height of the menu before scrolling.

### Type
number
```

--------------------------------

### `menuPlacement`

Source: https://react-select.com/props

Determines the default placement of the menu relative to the control. 'auto' allows flipping.

```APIDOC
## `menuPlacement`

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

### Type
One of <
"bottom", 
"auto", 
"top"
>
```

--------------------------------

### focus()

Source: https://react-select.com/advanced

Programmatically focuses the internal control input of the select component. This method is accessible on the component instance.

```APIDOC
## focus()

### Description

Focused the internal control input.

### Method

`focus()`

### Endpoint

N/A (Component Method)

### Parameters

None

### Request Example

```javascript
selectComponent.focus();
```

### Response

None
```

--------------------------------

### ValueContainer.cx

Source: https://react-select.com/props

Class name utility function for the value container.

```APIDOC
## ValueContainer.cx

### Description
Class name utility function for the value container.

### Signature
`(...) => string`
```

--------------------------------

### `styles`

Source: https://react-select.com/props

Allows for custom styling of the react-select component's inner elements.

```APIDOC
## `styles`

### Description
Style modifier methods.
A basic example can be found at the bottom of the Replacing builtins documentation.

### Type
StylesConfig{...}
```

--------------------------------

### `unstyled`

Source: https://react-select.com/props

Removes all default non-essential styles from the select component.

```APIDOC
## `unstyled`

### Description
Remove all non-essential styles.

### Type
boolean
```

--------------------------------

### content

Source: https://react-select.com/props

Specifies the content of the element.

```APIDOC
## content

### Description
Specifies the content of the element.

### Type
`string`
```

--------------------------------

### dir

Source: https://react-select.com/props

Specifies the text direction for the element.

```APIDOC
## dir

### Description
Specifies the text direction (e.g., 'ltr', 'rtl').

### Type
`string`
```

--------------------------------

### Loading Indicator Props

Source: https://react-select.com/props

Props for customizing the LoadingIndicator component.

```APIDOC
## Loading Indicator Props

### `innerProps`

Props to be passed to the inner loading indicator element.

### `isFocused`

Indicates if the loading indicator is focused.

### `isDisabled`

Indicates if the loading indicator is disabled.

### `size`

The size of the loading indicator.
```

--------------------------------

### tabIndex

Source: https://react-select.com/props

Determines the tab order of the element.

```APIDOC
## tabIndex

### Description
Determines the tab order of the element.

### Type
`number`
```

--------------------------------

### Select Component Props

Source: https://react-select.com/props

Core props for configuring the react-select component itself.

```APIDOC
## Select Component Props

### `children`
ReactNode One of <
null,
string,
number,
boolean,
{},
ReactElement{...},
ReactNodeArray{...},
ReactPortal{...}
>
### `data` ` required`
Option
### `innerProps` ` required`
DetailedHTMLProps Intersection<...>
### `selectProps` ` required`
Props{...}
### `clearValue` ` required`
() => void
### `cx` ` required`
(...) => string
### `getStyles` ` required`
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.
<Key>(...) => ...
### `getClassNames` ` required`
<Key>(...) => ...
### `getValue` ` required`
() => ReadonlyArray<...>
### `hasValue` ` required`
boolean
### `isMulti` ` required`
boolean
### `isRtl` ` required`
boolean
### `options` ` required`
ReadonlyArray<One of <
Option,
Group
>>
### `selectOption` ` required`
(...) => void
### `selectProps` ` required`
Props{...}
### `setValue` ` required`
(...) => void
### `theme` ` required`
Theme{...}
```

--------------------------------

### `tabIndex`

Source: https://react-select.com/props

Sets the tab index for the input element.

```APIDOC
## `tabIndex`

### Description
Sets the tabIndex attribute on the input.

### Type
number
```

--------------------------------

### Control and Input Behavior

Source: https://react-select.com/props

Props that control the behavior of the select component's control and input elements.

```APIDOC
## `openMenuOnFocus`

### Description
Allows control of whether the menu is opened when the Select is focused.

### Type
boolean

## `openMenuOnClick`

### Description
Allows control of whether the menu is opened when the Select is clicked.

### Type
boolean

## `autoFocus`

### Description
Focus the control when it is mounted.

### Type
boolean

## `className`

### Description
Sets a className attribute on the outer component.

### Type
string

## `classNamePrefix`

### Description
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.

### Type
One of < null, string >

## `delimiter`

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

### Type
string

## `formatOptionLabel`

### Description
Formats option labels in the menu and control as React components.

### Type
(...) => ...

## `hideSelectedOptions`

### Description
Hide the selected option from the menu.

### Type
boolean

## `id`

### Description
The id to set on the SelectContainer component.

### Type
string

## `inputValue`

### Description
The value of the search input.

### Type
string

## `inputId`

### Description
The id of the search input.

### Type
string

## `instanceId`

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

### Type
One of < string, number >

## `isClearable`

### Description
Is the select value clearable.

### Type
boolean

## `isOptionSelected`

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

### Type
(...) => boolean

## `menuPortalTarget`

### Description
Whether the menu should use a portal, and where it should attach. An example can be found in the Portaling documentation.

### Type
One of < null, HTMLElement{...} >

## `name`

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

### Type
string

## `onBlur`

### Description
Handle blur events on the control.

### Type
(...) => void

## `onChange`

### Description
Handle change events on the select.

### Type
(...) => void

## `onFocus`

### Description
Handle focus events on the control.

### Type
(...) => void

## `onInputChange`

### Description
Handle change events on the input.

### Type
(...) => void

## `onKeyDown`

### Description
Handle key down events on the select.

### Type
(...) => void

## `onMenuOpen`

### Description
Handle the menu opening.

### Type
() => void

## `onMenuClose`

### Description
Handle the menu closing.

### Type
() => void

## `onMenuScrollToTop`

### Description
Fired when the user scrolls to the top of the menu.

### Type
(...) => void

## `onMenuScrollToBottom`

### Description
Fired when the user scrolls to the bottom of the menu.

### Type
(...) => void

## `theme`

### Description
Theme modifier method.

### Type
One of < Theme{...}, (...) => ... >

## `value`

### Description
The value of the select; reflected by the selected option.

### Type
One of < null, Option, ReadonlyArray<...> >

## `required`

### Description
Marks the value-holding input as required for form validation.

### Type
boolean
```

--------------------------------

### `noOptionsMessage`

Source: https://react-select.com/props

Custom message displayed when no options are available.

```APIDOC
## `noOptionsMessage`

### Description
Text to display when there are no options.

### Type
(...) => ...
```

--------------------------------

### Portaling the Select Menu

Source: https://react-select.com/advanced

Use the `menuPortalTarget` prop to render the select menu in a different DOM node. This is useful for managing layering and accessibility, especially within modals.

```jsx
function Example() {
  return (
    <Select
      menuPortalTarget={document.modal}
      // ... other props
    />
  )
}
```

--------------------------------

### Controlling Menu Open State

Source: https://react-select.com/advanced

Manage the `menuIsOpen` prop to programmatically control whether the select menu is open or closed. This allows for custom triggers or behaviors.

```jsx
function Example() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <Select
      menuIsOpen={isOpen}
      onChange={() => setIsOpen(false)}
      // ... other props
    />
  )
}
```

--------------------------------

### getClassNames

Source: https://react-select.com/props

Helper function to generate class names for the select component.

```APIDOC
## getClassNames

### Description
Helper function to generate class names for the select component.

### Signature
`<Key>(...) => ...`
```

--------------------------------

### autoCapitalize

Source: https://react-select.com/props

Controls whether input punctuation is automatically changed when entering text.

```APIDOC
## autoCapitalize

### Description
Controls automatic capitalization of input.

### Type
`string`
```

--------------------------------

### `components`

Source: https://react-select.com/props

Allows overwriting or customizing compositional components used in react-select.

```APIDOC
## `components`

### Description
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.

### Type
Partial{...}
```

--------------------------------

### slot

Source: https://react-select.com/props

Assigns a slot to an element when using Shadow DOM.

```APIDOC
## slot

### Description
Assigns a slot for Shadow DOM.

### Type
`string`
```

--------------------------------

### title

Source: https://react-select.com/props

Provides advisory information about the element.

```APIDOC
## title

### Description
Provides advisory information about the element.

### Type
`string`
```

--------------------------------

### ValueContainer.className

Source: https://react-select.com/props

Custom class name for the value container.

```APIDOC
## ValueContainer.className

### Description
Custom class name for the value container.

### Type
`string`
```

--------------------------------

### Typing onChange for Multi Select

Source: https://react-select.com/typescript

Provides the correct TypeScript signature for the onChange callback when using a multi-select instance of React Select.

```typescript
const onChange = (option: readonly Option[], actionMeta: ActionMeta<Option>) => {
   ...
```

--------------------------------

### Default Filter Configuration

Source: https://react-select.com/advanced

These are the default settings used by the `createFilter` function for filtering options. They can be customized to change how the input string matches option labels.

```javascript
ignoreCase: true,
ignoreAccents: true,
matchFrom: 'any',
stringify: option => `${option.label} ${option.value}`,
trim: true,
```

--------------------------------

### Importing Types from src Directory

Source: https://react-select.com/upgrade

If you were previously importing types from the 'src' directory when using '@types/react-select', these should now be imported from the 'dist/declarations/src' directory.

```javascript
import { ... } from 'react-select/src/...';
```

```javascript
import { ... } from 'react-select/dist/declarations/src/...';
```

--------------------------------

### contextMenu

Source: https://react-select.com/props

Specifies the ID of a context menu element to be used for the element.

```APIDOC
## contextMenu

### Description
Specifies the ID of a context menu for the element.

### Type
`string`
```

--------------------------------

### Typing onChange for Single Select

Source: https://react-select.com/typescript

Provides the correct TypeScript signature for the onChange callback when using a single-select instance of React Select.

```typescript
const onChange = (option: Option | null, actionMeta: ActionMeta<Option>) => {
   ...
```

--------------------------------

### role

Source: https://react-select.com/props

Defines the role of the element in assistive technologies.

```APIDOC
## role

### Description
Defines the role of the element for accessibility.

### Type
`"article" | "button" | "dialog" | "figure" | "form" | "img" | "link" | "main" | "menu" | "menuitem" | "option" | "table" | "switch" | "group" | "none" | "navigation" | "document" | Intersection<...> | "checkbox" | "listbox" | "radio" | "region" | "cell" | "grid" | "row" | "listitem" | "menubar" | "progressbar" | "separator" | "tab" | "tabpanel" | "toolbar" | "tooltip" | "treeitem" | "scrollbar" | "alert" | "alertdialog" | "application" | "banner" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "directory" | "feed" | "gridcell" | "heading" | "list" | "log" | "marquee" | "math" | "menuitemcheckbox" | "menuitemradio" | "note" | "presentation" | "radiogroup" | "rowgroup" | "rowheader" | "search" | "searchbox" | "slider" | "spinbutton" | "status" | "tablist" | "term" | "textbox" | "timer" | "tree" | "treegrid"`
```

--------------------------------

### property

Source: https://react-select.com/props

Specifies a property of the element.

```APIDOC
## property

### Description
Specifies a property of the element.

### Type
`string`
```