Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface Props<Option, IsMulti, Group>

Type parameters

  • Option

  • IsMulti: boolean

  • Group: GroupBase<Option>

Hierarchy

  • Props

Index

Properties

aria-errormessage?: string

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

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

Indicate if the value entered in the field is invalid

aria-label?: string

Aria label (for assistive tech)

aria-labelledby?: string

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

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

ariaLiveMessages?: AriaLiveMessages<Option, IsMulti, Group>

Customize the messages used by the aria-live component

autoFocus?: boolean

Focus the control when it is mounted

backspaceRemovesValue: boolean

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

blurInputOnSelect: boolean

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

captureMenuScroll: boolean

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

className?: string

Sets a className attribute on the outer component

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: 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: boolean

Close the select menu when the user selects an option

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: boolean

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

delimiter?: string

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

escapeClearsValue: boolean

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

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

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

form?: string

Sets the form attribute on the input

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<Option>

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

hideSelectedOptions?: boolean

Hide the selected option from the menu

id?: string

The id to set on the SelectContainer component.

inputId?: string

The id of the search input

inputValue: string

The value of the search input

instanceId?: string | number

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

isClearable?: boolean

Is the select value clearable

isDisabled: boolean

Is the select disabled

isLoading: boolean

Is the select in a state of loading (async)

isMulti: IsMulti

Support multiple selected options

isRtl: boolean

Is the select direction right-to-left

isSearchable: boolean

Whether to enable search functionality

maxMenuHeight: number

Maximum height of the menu before scrolling

menuIsOpen: boolean

Whether the menu is open

menuPlacement: MenuPlacement

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

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

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

menuShouldBlockScroll: boolean

Whether to block scroll events when the menu is open

menuShouldScrollIntoView: boolean

Whether the menu should be scrolled into view when it opens

minMenuHeight: number

Minimum height of the menu before flipping

name?: string

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

onBlur?: FocusEventHandler<HTMLInputElement>

Handle blur events on the control

onFocus?: FocusEventHandler<HTMLInputElement>

Handle focus events on the control

onKeyDown?: KeyboardEventHandler<HTMLDivElement>

Handle key down events on the select

openMenuOnClick: boolean

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

openMenuOnFocus: boolean

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

options: OptionsOrGroups<Option, Group>

Array of options that populate the select menu

pageSize: number

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

placeholder: ReactNode

Placeholder for the select value

styles: StylesConfig<Option, IsMulti, Group>

Style modifier methods

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

tabIndex: number

Sets the tabIndex attribute on the input

tabSelectsValue: boolean

Select the currently focused option when the user presses tab

theme?: ThemeConfig

Theme modifier method

value: PropsValue<Option>

The value of the select; reflected by the selected option

Methods

  • Formats group labels in the menu as React components

    An example can be found in the Replacing builtins documentation.

    Parameters

    • group: Group

    Returns ReactNode

  • Formats option labels in the menu and control as React components

    Parameters

    Returns ReactNode

  • 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

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

    Parameters

    Returns boolean

  • loadingMessage(obj: { inputValue: string }): ReactNode
  • Async: Text to display when loading options

    Parameters

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

    Returns ReactNode

  • noOptionsMessage(obj: { inputValue: string }): ReactNode
  • Text to display when there are no options

    Parameters

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

    Returns ReactNode

  • Handle change events on the select

    Parameters

    Returns void

  • Handle change events on the input

    Parameters

    Returns void

  • onMenuClose(): void
  • Handle the menu closing

    Returns void

  • onMenuOpen(): void
  • Handle the menu opening

    Returns void

  • onMenuScrollToBottom(event: TouchEvent | WheelEvent): void
  • Fired when the user scrolls to the bottom of the menu

    Parameters

    • event: TouchEvent | WheelEvent

    Returns void

  • onMenuScrollToTop(event: TouchEvent | WheelEvent): void
  • Fired when the user scrolls to the top of the menu

    Parameters

    • event: TouchEvent | WheelEvent

    Returns void

  • screenReaderStatus(obj: { count: number }): string
  • Status to relay to screen readers

    Parameters

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

    Returns string

Generated using TypeDoc