Interface Props<Option, IsMulti, Group>

Type Parameters

  • Option

  • IsMulti extends boolean

  • Group extends GroupBase<Option>

Hierarchy

  • Props

Properties

aria-errormessage? aria-invalid? aria-label? aria-labelledby? aria-live? ariaLiveMessages? autoFocus? backspaceRemovesValue blurInputOnSelect captureMenuScroll className? classNamePrefix? closeMenuOnScroll closeMenuOnSelect components controlShouldRenderValue delimiter? escapeClearsValue filterOption form? formatGroupLabel formatOptionLabel? getOptionLabel getOptionValue hideSelectedOptions? id? inputId? inputValue instanceId? isClearable? isDisabled isLoading isMulti isOptionDisabled isOptionSelected? isRtl isSearchable loadingMessage maxMenuHeight menuIsOpen menuPlacement menuPortalTarget? menuPosition menuShouldBlockScroll menuShouldScrollIntoView minMenuHeight name? noOptionsMessage onBlur? onChange onFocus? onInputChange onKeyDown? onMenuClose onMenuOpen onMenuScrollToBottom? onMenuScrollToTop? openMenuOnClick openMenuOnFocus options pageSize placeholder screenReaderStatus styles tabIndex tabSelectsValue theme? value

Properties

Optional aria-errormessage

aria-errormessage?: string

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

Optional aria-invalid

aria-invalid?: boolean | "false" | "true" | "grammar" | "spelling"

Indicate if the value entered in the field is invalid *

Optional aria-label

aria-label?: string

Aria label (for assistive tech)

Optional aria-labelledby

aria-labelledby?: string

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

Optional aria-live

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

Optional ariaLiveMessages

ariaLiveMessages?: AriaLiveMessages<Option, IsMulti, Group>

Customize the messages used by the aria-live component

Optional autoFocus

autoFocus?: boolean

Focus the control when it is mounted

backspaceRemovesValue

backspaceRemovesValue: boolean

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

blurInputOnSelect

blurInputOnSelect: boolean

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

captureMenuScroll

captureMenuScroll: boolean

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

Optional className

className?: string

Sets a className attribute on the outer component

Optional classNamePrefix

classNamePrefix?: null | 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.

closeMenuOnScroll

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.

closeMenuOnSelect

closeMenuOnSelect: boolean

Close the select menu when the user selects an option

components

components: Partial<SelectComponents<Option, IsMulti, Group>>

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

controlShouldRenderValue

controlShouldRenderValue: boolean

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

Optional delimiter

delimiter?: string

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

escapeClearsValue

escapeClearsValue: boolean

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

filterOption

filterOption: null | ((option: FilterOptionOption<Option>, inputValue: string) => boolean)

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

Optional form

form?: string

Sets the form attribute on the input

formatGroupLabel

formatGroupLabel: ((group: Group) => ReactNode)

Type declaration

    • (group: Group): ReactNode

    • Formats group labels in the menu as React components

      An example can be found in the Replacing builtins documentation.

      Parameters

      • group: Group

      Returns ReactNode

Optional formatOptionLabel

formatOptionLabel?: ((data: Option, formatOptionLabelMeta: FormatOptionLabelMeta<Option>) => ReactNode)

Type declaration

getOptionLabel

getOptionLabel: GetOptionLabel<Option>

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.

getOptionValue

getOptionValue: GetOptionValue<Option>

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

Optional hideSelectedOptions

hideSelectedOptions?: boolean

Hide the selected option from the menu

Optional id

id?: string

The id to set on the SelectContainer component.

Optional inputId

inputId?: string

The id of the search input

inputValue

inputValue: string

The value of the search input

Optional instanceId

instanceId?: string | number

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

Optional isClearable

isClearable?: boolean

Is the select value clearable

isDisabled

isDisabled: boolean

Is the select disabled

isLoading

isLoading: boolean

Is the select in a state of loading (async)

isMulti

isMulti: IsMulti

Support multiple selected options

isOptionDisabled

isOptionDisabled: ((option: Option, selectValue: <internal>.Options<Option>) => boolean)

Type declaration

    • (option: Option, selectValue: <internal>.Options<Option>): boolean

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

      An example can be found in the Replacing builtins documentation.

      Parameters

      Returns boolean

Optional isOptionSelected

isOptionSelected?: ((option: Option, selectValue: <internal>.Options<Option>) => boolean)

Type declaration

    • (option: Option, selectValue: <internal>.Options<Option>): boolean

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

      Parameters

      Returns boolean

isRtl

isRtl: boolean

Is the select direction right-to-left

isSearchable

isSearchable: boolean

Whether to enable search functionality

loadingMessage

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

Type declaration

    • (obj: { inputValue: string }): ReactNode

    • Async: Text to display when loading options

      Parameters

      • obj: { inputValue: string }
        • inputValue: string

      Returns ReactNode

maxMenuHeight

maxMenuHeight: number

Maximum height of the menu before scrolling

menuIsOpen

menuIsOpen: boolean

Whether the menu is open

menuPlacement

menuPlacement: MenuPlacement

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

Optional menuPortalTarget

menuPortalTarget?: null | HTMLElement

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

An example can be found in the Portaling documentation

menuPosition

menuPosition: MenuPosition

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

menuShouldBlockScroll

menuShouldBlockScroll: boolean

Whether to block scroll events when the menu is open

menuShouldScrollIntoView

menuShouldScrollIntoView: boolean

Whether the menu should be scrolled into view when it opens

minMenuHeight

minMenuHeight: number

Minimum height of the menu before flipping

Optional name

name?: string

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

noOptionsMessage

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

Type declaration

    • (obj: { inputValue: string }): ReactNode

    • Text to display when there are no options

      Parameters

      • obj: { inputValue: string }
        • inputValue: string

      Returns ReactNode

Optional onBlur

onBlur?: FocusEventHandler<HTMLInputElement>

Handle blur events on the control

onChange

onChange: ((newValue: OnChangeValue<Option, IsMulti>, actionMeta: ActionMeta<Option>) => void)

Type declaration

Optional onFocus

onFocus?: FocusEventHandler<HTMLInputElement>

Handle focus events on the control

onInputChange

onInputChange: ((newValue: string, actionMeta: InputActionMeta) => void)

Type declaration

    • (newValue: string, actionMeta: InputActionMeta): void

    • Handle change events on the input

      Parameters

      Returns void

Optional onKeyDown

onKeyDown?: KeyboardEventHandler<HTMLDivElement>

Handle key down events on the select

onMenuClose

onMenuClose: (() => void)

Type declaration

    • (): void

    • Handle the menu closing

      Returns void

onMenuOpen

onMenuOpen: (() => void)

Type declaration

    • (): void

    • Handle the menu opening

      Returns void

Optional onMenuScrollToBottom

onMenuScrollToBottom?: ((event: TouchEvent | WheelEvent) => void)

Type declaration

    • (event: TouchEvent | WheelEvent): void

    • Fired when the user scrolls to the bottom of the menu

      Parameters

      • event: TouchEvent | WheelEvent

      Returns void

Optional onMenuScrollToTop

onMenuScrollToTop?: ((event: TouchEvent | WheelEvent) => void)

Type declaration

    • (event: TouchEvent | WheelEvent): void

    • Fired when the user scrolls to the top of the menu

      Parameters

      • event: TouchEvent | WheelEvent

      Returns void

openMenuOnClick

openMenuOnClick: boolean

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

openMenuOnFocus

openMenuOnFocus: boolean

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

options

options: OptionsOrGroups<Option, Group>

Array of options that populate the select menu

pageSize

pageSize: number

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

placeholder

placeholder: ReactNode

Placeholder for the select value

screenReaderStatus

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

Type declaration

    • (obj: { count: number }): string

    • Status to relay to screen readers

      Parameters

      • obj: { count: number }
        • count: number

      Returns string

styles

styles: StylesConfig<Option, IsMulti, Group>

Style modifier methods

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

tabIndex

tabIndex: number

Sets the tabIndex attribute on the input

tabSelectsValue

tabSelectsValue: boolean

Select the currently focused option when the user presses tab

Optional theme

theme?: ThemeConfig

Theme modifier method

value

value: PropsValue<Option>

The value of the select; reflected by the selected option

Settings

Member Visibility

Theme

Generated using TypeDoc