mirror of
https://github.com/payloadcms/payload.git
synced 2026-09-14 20:07:19 +08:00
Sean Zubrickas
4884195d71
Adds the first release of @payloadcms/ui component documentation, focused on common, visually useful components and working Payload v3 examples. - Adds component guides, usage guidance, props, and accessibility notes. - Adds an overview and curated component inventory under Features → UI Components. *_v4 as a fast follow once this gets approved_
42 lines
2.3 KiB
Plaintext
42 lines
2.3 KiB
Plaintext
---
|
|
title: ReactSelect
|
|
label: ReactSelect
|
|
order: 220
|
|
desc: Select one or more options with Payload's ReactSelect component.
|
|
keywords: ui, component, select, dropdown, option, form
|
|
---
|
|
|
|
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
|
|
|
|
<ComponentPreview component="ReactSelect" example="basic" />
|
|
|
|
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._
|