Skip to content

Interface: SelectProps<T>#

Renderer.Component.SelectProps

Type parameters#

Name Type
T any

Hierarchy#

  • StateManagerProps<T, boolean>

  • CreatableProps<T, boolean, GroupBase<T>>

↳ SelectProps

↳↳ NamespaceSelectProps

Table of contents#

Properties#

Methods#

Properties#

allowCreateWhileLoading#

• Optional allowCreateWhileLoading: boolean

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.

Inherited from#

CreatableProps.allowCreateWhileLoading

aria-errormessage#

• Optional aria-errormessage: string

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

Inherited from#

ReactSelectProps.aria-errormessage

aria-invalid#

• Optional aria-invalid: boolean | "true" | "false" | "grammar" | "spelling"

Indicate if the value entered in the field is invalid

Inherited from#

ReactSelectProps.aria-invalid

aria-label#

• Optional aria-label: string

Aria label (for assistive tech)

Inherited from#

ReactSelectProps.aria-label

aria-labelledby#

• Optional aria-labelledby: string

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

Inherited from#

ReactSelectProps.aria-labelledby

aria-live#

• Optional aria-live: "off" | "assertive" | "polite"

Used to set the priority with which screen reader should treat updates to live regions. The possible settings are: off, polite (default) or assertive

Inherited from#

ReactSelectProps.aria-live

ariaLiveMessages#

• Optional ariaLiveMessages: AriaLiveMessages<T, boolean, GroupBase<T>>

Customize the messages used by the aria-live component

Inherited from#

ReactSelectProps.ariaLiveMessages

autoConvertOptions#

• Optional autoConvertOptions: boolean

autoFocus#

• Optional autoFocus: boolean

Focus the control when it is mounted

Inherited from#

ReactSelectProps.autoFocus

backspaceRemovesValue#

• Optional backspaceRemovesValue: boolean

Remove the currently focused option when the user presses backspace when Select isClearable or isMulti

Inherited from#

ReactSelectProps.backspaceRemovesValue

blurInputOnSelect#

• Optional blurInputOnSelect: boolean

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

Inherited from#

ReactSelectProps.blurInputOnSelect

captureMenuScroll#

• Optional captureMenuScroll: boolean

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

Inherited from#

ReactSelectProps.captureMenuScroll

className#

• Optional className: string

Sets a className attribute on the outer component

Inherited from#

ReactSelectProps.className

classNamePrefix#

• Optional classNamePrefix: string

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.

Inherited from#

ReactSelectProps.classNamePrefix

closeMenuOnScroll#

• Optional closeMenuOnScroll: boolean | (event: Event) => boolean

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.

Inherited from#

ReactSelectProps.closeMenuOnScroll

closeMenuOnSelect#

• Optional closeMenuOnSelect: boolean

Close the select menu when the user selects an option

Inherited from#

ReactSelectProps.closeMenuOnSelect

components#

• Optional components: Partial<SelectComponents<T, boolean, GroupBase<T>>>

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

Inherited from#

ReactSelectProps.components

controlShouldRenderValue#

• Optional controlShouldRenderValue: boolean

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

Inherited from#

ReactSelectProps.controlShouldRenderValue

createOptionPosition#

• Optional createOptionPosition: "first" | "last"

Sets the position of the createOption element in your options list. Defaults to 'last'

Inherited from#

CreatableProps.createOptionPosition

defaultInputValue#

• Optional defaultInputValue: string

Inherited from#

ReactSelectProps.defaultInputValue

defaultMenuIsOpen#

• Optional defaultMenuIsOpen: boolean

Inherited from#

ReactSelectProps.defaultMenuIsOpen

defaultValue#

• Optional defaultValue: PropsValue<T>

Inherited from#

ReactSelectProps.defaultValue

delimiter#

• Optional delimiter: string

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

Inherited from#

ReactSelectProps.delimiter

escapeClearsValue#

• Optional escapeClearsValue: boolean

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

Inherited from#

ReactSelectProps.escapeClearsValue

filterOption#

• Optional filterOption: (option: FilterOptionOption<T>, inputValue: string) => boolean

Type declaration#

▸ (option, inputValue): boolean

Custom method to filter whether an option should be displayed in the menu

Parameters#
Name Type
option FilterOptionOption<T>
inputValue string
Returns#

boolean

Inherited from#

ReactSelectProps.filterOption

form#

• Optional form: string

Sets the form attribute on the input

Inherited from#

ReactSelectProps.form

formatGroupLabel#

• Optional formatGroupLabel: (group: GroupBase<T>) => ReactNode

Type declaration#

▸ (group): ReactNode

Formats group labels in the menu as React components

An example can be found in the Replacing builtins documentation.

Parameters#
Name Type
group GroupBase<T>
Returns#

ReactNode

Inherited from#

ReactSelectProps.formatGroupLabel

formatOptionLabel#

• Optional formatOptionLabel: (data: T, formatOptionLabelMeta: FormatOptionLabelMeta<T>) => ReactNode

Type declaration#

▸ (data, formatOptionLabelMeta): ReactNode

Formats option labels in the menu and control as React components

Parameters#
Name Type
data T
formatOptionLabelMeta FormatOptionLabelMeta<T>
Returns#

ReactNode

Inherited from#

ReactSelectProps.formatOptionLabel

getOptionLabel#

• Optional getOptionLabel: GetOptionLabel<T>

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.

Inherited from#

ReactSelectProps.getOptionLabel

getOptionValue#

• Optional getOptionValue: GetOptionValue<T>

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

Inherited from#

ReactSelectProps.getOptionValue

hideSelectedOptions#

• Optional hideSelectedOptions: boolean

Hide the selected option from the menu

Inherited from#

ReactSelectProps.hideSelectedOptions

id#

• Optional id: string

Overrides#

ReactSelectProps.id

inputId#

• Optional inputId: string

The id of the search input

Inherited from#

ReactSelectProps.inputId

inputValue#

• Optional inputValue: string

The value of the search input

Inherited from#

ReactSelectProps.inputValue

instanceId#

• Optional instanceId: string | number

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

Inherited from#

ReactSelectProps.instanceId

isClearable#

• Optional isClearable: boolean

Is the select value clearable

Inherited from#

ReactSelectProps.isClearable

isCreatable#

• Optional isCreatable: boolean

isDisabled#

• Optional isDisabled: boolean

Is the select disabled

Inherited from#

ReactSelectProps.isDisabled

isLoading#

• Optional isLoading: boolean

Is the select in a state of loading (async)

Inherited from#

ReactSelectProps.isLoading

isMulti#

• Optional isMulti: boolean

Support multiple selected options

Inherited from#

ReactSelectProps.isMulti

isOptionDisabled#

• Optional isOptionDisabled: (option: T, selectValue: Options<T>) => boolean

Type declaration#

▸ (option, selectValue): boolean

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

An example can be found in the Replacing builtins documentation.

Parameters#
Name Type
option T
selectValue Options<T>
Returns#

boolean

Inherited from#

ReactSelectProps.isOptionDisabled

isOptionSelected#

• Optional isOptionSelected: (option: T, selectValue: Options<T>) => boolean

Type declaration#

▸ (option, selectValue): boolean

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

Parameters#
Name Type
option T
selectValue Options<T>
Returns#

boolean

Inherited from#

ReactSelectProps.isOptionSelected

isRtl#

• Optional isRtl: boolean

Is the select direction right-to-left

Inherited from#

ReactSelectProps.isRtl

isSearchable#

• Optional isSearchable: boolean

Whether to enable search functionality

Inherited from#

ReactSelectProps.isSearchable

loadingMessage#

• Optional loadingMessage: (obj: { inputValue: string }) => ReactNode

Type declaration#

▸ (obj): ReactNode

Async: Text to display when loading options

Parameters#
Name Type
obj Object
obj.inputValue string
Returns#

ReactNode

Inherited from#

ReactSelectProps.loadingMessage

maxMenuHeight#

• Optional maxMenuHeight: number

Maximum height of the menu before scrolling

Inherited from#

ReactSelectProps.maxMenuHeight

• Optional menuClass: string

• Optional menuIsOpen: boolean

Whether the menu is open

Inherited from#

ReactSelectProps.menuIsOpen

• Optional menuPlacement: MenuPlacement

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

Inherited from#

ReactSelectProps.menuPlacement

• Optional menuPortalTarget: HTMLElement

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

An example can be found in the Portaling documentation

Inherited from#

ReactSelectProps.menuPortalTarget

• Optional menuPosition: MenuPosition

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

Inherited from#

ReactSelectProps.menuPosition

• Optional menuShouldBlockScroll: boolean

Whether to block scroll events when the menu is open

Inherited from#

ReactSelectProps.menuShouldBlockScroll

• Optional menuShouldScrollIntoView: boolean

Whether the menu should be scrolled into view when it opens

Inherited from#

ReactSelectProps.menuShouldScrollIntoView

minMenuHeight#

• Optional minMenuHeight: number

Minimum height of the menu before flipping

Inherited from#

ReactSelectProps.minMenuHeight

name#

• Optional name: string

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

Inherited from#

ReactSelectProps.name

noOptionsMessage#

• Optional noOptionsMessage: (obj: { inputValue: string }) => ReactNode

Type declaration#

▸ (obj): ReactNode

Text to display when there are no options

Parameters#
Name Type
obj Object
obj.inputValue string
Returns#

ReactNode

Inherited from#

ReactSelectProps.noOptionsMessage

onBlur#

• Optional onBlur: FocusEventHandler<HTMLInputElement>

Handle blur events on the control

Inherited from#

ReactSelectProps.onBlur

onFocus#

• Optional onFocus: FocusEventHandler<HTMLInputElement>

Handle focus events on the control

Inherited from#

ReactSelectProps.onFocus

onKeyDown#

• Optional onKeyDown: KeyboardEventHandler<HTMLDivElement>

Handle key down events on the select

Inherited from#

ReactSelectProps.onKeyDown

onMenuScrollToBottom#

• Optional onMenuScrollToBottom: (event: WheelEvent | TouchEvent) => void

Type declaration#

▸ (event): void

Fired when the user scrolls to the bottom of the menu

Parameters#
Name Type
event WheelEvent | TouchEvent
Returns#

void

Inherited from#

ReactSelectProps.onMenuScrollToBottom

onMenuScrollToTop#

• Optional onMenuScrollToTop: (event: WheelEvent | TouchEvent) => void

Type declaration#

▸ (event): void

Fired when the user scrolls to the top of the menu

Parameters#
Name Type
event WheelEvent | TouchEvent
Returns#

void

Inherited from#

ReactSelectProps.onMenuScrollToTop

openMenuOnClick#

• Optional openMenuOnClick: boolean

Allows control of whether the menu is opened when the Select is clicked

Inherited from#

ReactSelectProps.openMenuOnClick

openMenuOnFocus#

• Optional openMenuOnFocus: boolean

Allows control of whether the menu is opened when the Select is focused

Inherited from#

ReactSelectProps.openMenuOnFocus

options#

• Optional options: OptionsOrGroups<T, GroupBase<T>>

Array of options that populate the select menu

Inherited from#

ReactSelectProps.options

pageSize#

• Optional pageSize: number

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

Inherited from#

ReactSelectProps.pageSize

placeholder#

• Optional placeholder: ReactNode

Placeholder for the select value

Inherited from#

ReactSelectProps.placeholder

screenReaderStatus#

• Optional screenReaderStatus: (obj: { count: number }) => string

Type declaration#

▸ (obj): string

Status to relay to screen readers

Parameters#
Name Type
obj Object
obj.count number
Returns#

string

Inherited from#

ReactSelectProps.screenReaderStatus

styles#

• Optional styles: StylesConfig<T, boolean, GroupBase<T>>

Style modifier methods

A basic example can be found at the bottom of the Replacing builtins documentation.

Inherited from#

ReactSelectProps.styles

tabIndex#

• Optional tabIndex: number

Sets the tabIndex attribute on the input

Inherited from#

ReactSelectProps.tabIndex

tabSelectsValue#

• Optional tabSelectsValue: boolean

Select the currently focused option when the user presses tab

Inherited from#

ReactSelectProps.tabSelectsValue

theme#

• Optional theme: ThemeConfig

Theme modifier method

Inherited from#

ReactSelectProps.theme

themeName#

• Optional themeName: "lens" | "light" | "outlined" | "dark"

value#

• Optional value: T

Overrides#

ReactSelectProps.value

Methods#

formatCreateLabel#

▸ Optional formatCreateLabel(inputValue): ReactNode

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

Parameters#

Name Type
inputValue string

Returns#

ReactNode

Inherited from#

CreatableProps.formatCreateLabel

getNewOptionData#

▸ Optional getNewOptionData(inputValue, optionLabel): Option

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

Parameters#

Name Type
inputValue string
optionLabel ReactNode

Returns#

Option

Inherited from#

CreatableProps.getNewOptionData

isValidNewOption#

▸ Optional isValidNewOption(inputValue, value, options, accessors): boolean

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

Parameters#

Name Type
inputValue string
value Options<Option>
options OptionsOrGroups<Option, Group>
accessors Accessors<Option>

Returns#

boolean

Inherited from#

CreatableProps.isValidNewOption

onChange#

▸ Optional onChange(option, meta?): void

Parameters#

Name Type
option T
meta? ActionMeta<any>

Returns#

void

Overrides#

ReactSelectProps.onChange

onCreateOption#

▸ Optional onCreateOption(inputValue): 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.

Parameters#

Name Type
inputValue string

Returns#

void

Inherited from#

CreatableProps.onCreateOption

onInputChange#

▸ Optional onInputChange(newValue, actionMeta): void

Handle change events on the input

Parameters#

Name Type
newValue string
actionMeta InputActionMeta

Returns#

void

Inherited from#

ReactSelectProps.onInputChange

onMenuClose#

▸ Optional onMenuClose(): void

Handle the menu closing

Returns#

void

Inherited from#

ReactSelectProps.onMenuClose

onMenuOpen#

▸ Optional onMenuOpen(): void

Handle the menu opening

Returns#

void

Inherited from#

ReactSelectProps.onMenuOpen