# ReactSelect

Source: https://payloadcms.com/docs/ui-components/react-select

The `ReactSelect` component adapts `react-select` to Payload's styles and interaction patterns. It is also exported as `Select`.

## Import

```tsx
import { ReactSelect } from '@payloadcms/ui'
```

## Basic usage

**Implementation**

```tsx
const options = [
  { label: 'Draft', value: 'draft' },
  { label: 'Published', value: 'published' },
  { label: 'Archived', value: 'archived' },
]

const [value, setValue] = useState(options[0])

<ReactSelect
  isClearable={false}
  onChange={setValue}
  options={options}
  placeholder="Select a status"
  value={value}
/>
```

**Styling**

Use ReactSelect’s stable rs__ classes under the Payload wrapper to customize the control and option states.

```css
.react-select .rs__control {
  background: #ffffff;
  border: 1px solid #6d5dfc;
  border-radius: 8px;
}

.react-select .rs__option--is-focused {
  background: #ede9fe;
}

.react-select .rs__option--is-selected {
  background: #6d5dfc;
  color: #ffffff;
}
```

- `background`: Control or option surface.
- `border`: Control outline.
- `color`: Selected option label.

Store the selected option object rather than only its value. Use `isMulti` when users can select more than one option.

## Common props

These are the props most commonly used with this component. See its exported types in `@payloadcms/ui` for the complete list.

| Prop           | Type                                  | Default   | Description                                     |
| -------------- | ------------------------------------- | --------- | ----------------------------------------------- |
| `options` \*   | `Option[] \| OptionGroup[]`           | —         | Options displayed in the menu.                  |
| `value`        | `Option \| Option[]`                  | —         | Selected option or options.                     |
| `onChange`     | `(value: Option \| Option[]) => void` | —         | Runs when the selection changes.                |
| `placeholder`  | `string \| LabelFunction`             | Localized | Sets the empty-state label.                     |
| `isMulti`      | `boolean`                             | `false`   | Allows multiple selected values.                |
| `isClearable`  | `boolean`                             | `true`    | Displays a control for clearing the value.      |
| `isSearchable` | `boolean`                             | `true`    | Allows options to be filtered by typing.        |
| `isCreatable`  | `boolean`                             | `false`   | Allows users to create values not in `options`. |
| `disabled`     | `boolean`                             | `false`   | Prevents interaction.                           |
| `isLoading`    | `boolean`                             | `false`   | Displays the loading state.                     |
| `showError`    | `boolean`                             | `false`   | Applies the validation error style.             |

_\* An asterisk denotes that a prop is required._