MultiSelect

StrictFieldProps

actions

ShorthandCollection<ButtonProps>

Set action button position, default to right

actionsPosition

enum

StrictSelectProps

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.

allowCreateWhileLoading

boolean

AppearanceProps

Manually set the Element appearance by Color Pool

appearance

aria-label

string

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

aria-labelledby

autoFocus

Remove the currently focused option when the user presses backspace

backspaceRemovesValue

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

blurInputOnSelect

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

captureMenuScroll

className attribute applied to the outer component

className

classNamePrefix attribute used as a base for inner component classNames

classNamePrefix

clearable

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.

closeMenuOnScroll

boolean | EventListener

Close the select menu when the user selects an option

closeMenuOnSelect

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](/api#components)

components

Partial<SelectComponents<Option, true, GroupTypeBase<Option>>>

User defined className used for content element

contentClassName

contentType

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

controlShouldRenderValue

creatable

danger

defaultInputValue

defaultValue

(string | number)[]

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

delimiter

disabled

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

escapeClearsValue

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

formatCreateLabel

(inputValue: string) => ReactNode

Formats group labels in the menu as React components

formatGroupLabel

(group: GroupTypeBase<Option>) => ReactNode

Formats option labels in the menu and control as React components

formatOptionLabel

(option: Option, labelMeta: FormatOptionLabelMeta<Option, true>) => ReactNode

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

getNewOptionData

(inputValue: string, optionLabel: ReactNode) => Option

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

getOptionLabel

(option: Option) => string

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

getOptionValue

(option: Option) => string | number

hideSelectedOptions

hint

ShorthandContent

User defined className used for hint element

hintClassName

icon

AppBucketsIcon<IconProps>

iconPosition

The id to set on the SelectContainer component.

info

inputId

inputValue

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

instanceId

string | number

isClearable

isDirty

isFocused

Direct declaration of isMulti props is forbidden, use the Select.Multi component instead

isMulti

never

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

isOptionDisabled

(option: Option, options: OptionsType<Option>) => boolean

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

isOptionSelected

isRtl

isSearchable

isTouched

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

isValidNewOption

(inputValue: string, value: OptionsType<Option>, options: OptionsType<Option>) => boolean

label

loading

Async: Text to display when loading options

loadingMessage

(obj: { inputValue: string; }) => string

Maximum height of the menu before scrolling

maxMenuHeight

number

menuIsOpen

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

menuPlacement

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

menuPortalTarget

HTMLElement

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

menuPosition

Whether to block scroll events when the menu is open

menuShouldBlockScroll

Whether the menu should be scrolled into view when it opens

menuShouldScrollIntoView

Minimum height of the menu before flipping

minMenuHeight

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

name

Text to display when there are no options

noOptionsMessage

onBlur

(e: FocusEvent<HTMLElement>, props: SelectEventProps<Option, (string | number)[], []>) => void

onChange

(nothing: null, props: SelectEventProps<Option, (string | number)[], []>) => void

onClear

(e: MouseEvent<SVGSVGElement, MouseEvent>) => void

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.

MultiSelect

Component Description Placeholder

MultiSelect

Props

`<MultiSelect />`