Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface SelectProps<OptionType, IsMulti, GroupType>

Type Parameters

  • OptionType extends OptionTypeBase = { label: string; value: string }

  • IsMulti extends boolean = false

  • GroupType extends GroupTypeBase<OptionType> = GroupTypeBase<OptionType>

Hierarchy

  • NamedProps<OptionType, IsMulti, GroupType>
  • SelectComponentsProps
    • SelectProps

Index

Properties

Properties

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 autoFocus

autoFocus?: boolean

Focus the control when it is mounted

Optional backspaceRemovesValue

backspaceRemovesValue?: boolean

Remove the currently focused option when the user presses backspace

Optional blurInputOnSelect

blurInputOnSelect?: boolean

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

Optional captureMenuScroll

captureMenuScroll?: boolean

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

Optional className

className?: string

className attribute applied to the outer component

Optional classNamePrefix

classNamePrefix?: null | string

classNamePrefix attribute used as a base for inner component classNames

Optional closeMenuOnScroll

closeMenuOnScroll?: boolean | EventListener

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.

Optional closeMenuOnSelect

closeMenuOnSelect?: boolean

Close the select menu when the user selects an option

Optional components

components?: Partial<SelectComponents<OptionType, IsMulti, GroupType>>

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

Optional controlShouldRenderValue

controlShouldRenderValue?: boolean

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

Optional defaultInputValue

defaultInputValue?: string

Optional defaultMenuIsOpen

defaultMenuIsOpen?: boolean

Optional defaultValue

defaultValue?: null | OptionType | readonly OptionType[]

Optional delimiter

delimiter?: string

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

Optional escapeClearsValue

escapeClearsValue?: boolean

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

Optional filterOption

filterOption?: null | ((option: Option, rawInput: string) => boolean)

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

Optional formatGroupLabel

formatGroupLabel?: formatGroupLabel<OptionType, GroupType>

Formats group labels in the menu as React components

Optional formatOptionLabel

formatOptionLabel?: ((option: OptionType, labelMeta: FormatOptionLabelMeta<OptionType, IsMulti>) => ReactNode)

Type declaration

    • (option: OptionType, labelMeta: FormatOptionLabelMeta<OptionType, IsMulti>): ReactNode

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

      Parameters

      • option: OptionType
      • labelMeta: FormatOptionLabelMeta<OptionType, IsMulti>

      Returns ReactNode

Optional getOptionLabel

getOptionLabel?: getOptionLabel<OptionType>

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

Optional getOptionValue

getOptionValue?: getOptionValue<OptionType>

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

Optional 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

Optional isDisabled

isDisabled?: boolean

Is the select disabled

Optional isLoading

isLoading?: boolean

Is the select in a state of loading (async)

Optional isMulti

isMulti?: IsMulti

Support multiple selected options

Optional isOptionDisabled

isOptionDisabled?: ((option: OptionType, options: OptionsType<OptionType>) => boolean)

Type declaration

    • (option: OptionType, options: OptionsType<OptionType>): boolean

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

      Parameters

      • option: OptionType
      • options: OptionsType<OptionType>

      Returns boolean

Optional isOptionSelected

isOptionSelected?: ((option: OptionType, options: OptionsType<OptionType>) => boolean)

Type declaration

    • (option: OptionType, options: OptionsType<OptionType>): boolean

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

      Parameters

      • option: OptionType
      • options: OptionsType<OptionType>

      Returns boolean

Optional isRtl

isRtl?: boolean

Is the select direction right-to-left

Optional isSearchable

isSearchable?: boolean

Whether to enable search functionality

Optional loadingMessage

loadingMessage?: ((obj: { inputValue: string }) => null | string)

Type declaration

    • (obj: { inputValue: string }): null | string

    • Async: Text to display when loading options

      Parameters

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

      Returns null | string

Optional maxMenuHeight

maxMenuHeight?: number

Maximum height of the menu before scrolling

Optional menuIsOpen

menuIsOpen?: boolean

Whether the menu is open

Optional 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

Optional menuPosition

menuPosition?: MenuPosition

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

Optional menuShouldBlockScroll

menuShouldBlockScroll?: boolean

Whether to block scroll events when the menu is open

Optional menuShouldScrollIntoView

menuShouldScrollIntoView?: boolean

Whether the menu should be scrolled into view when it opens

Optional 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)

Optional noOptionsMessage

noOptionsMessage?: ((obj: { inputValue: string }) => null | string)

Type declaration

    • (obj: { inputValue: string }): null | string

    • Text to display when there are no options

      Parameters

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

      Returns null | string

Optional onBlur

onBlur?: FocusEventHandler

Handle blur events on the control

Optional onChange

onChange?: ((value: ValueType<OptionType, IsMulti>, action: ActionMeta<OptionType>) => void)

Type declaration

    • (value: ValueType<OptionType, IsMulti>, action: ActionMeta<OptionType>): void

    • Handle change events on the select

      Parameters

      • value: ValueType<OptionType, IsMulti>
      • action: ActionMeta<OptionType>

      Returns void

Optional onFocus

onFocus?: FocusEventHandler

Handle focus events on the control

Optional onInputChange

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

Type declaration

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

    • Handle change events on the input

      Parameters

      • newValue: string
      • actionMeta: InputActionMeta

      Returns void

Optional onKeyDown

onKeyDown?: KeyboardEventHandler

Handle key down events on the select

Optional onMenuClose

onMenuClose?: (() => void)

Type declaration

    • (): void

    • Handle the menu closing

      Returns void

Optional onMenuOpen

onMenuOpen?: (() => void)

Type declaration

    • (): void

    • Handle the menu opening

      Returns void

Optional onMenuScrollToBottom

onMenuScrollToBottom?: ((event: SyntheticEvent<HTMLElement, Event>) => void)

Type declaration

    • (event: SyntheticEvent<HTMLElement, Event>): void

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

      Parameters

      • event: SyntheticEvent<HTMLElement, Event>

      Returns void

Optional onMenuScrollToTop

onMenuScrollToTop?: ((event: SyntheticEvent<HTMLElement, Event>) => void)

Type declaration

    • (event: SyntheticEvent<HTMLElement, Event>): void

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

      Parameters

      • event: SyntheticEvent<HTMLElement, Event>

      Returns void

Optional openMenuOnClick

openMenuOnClick?: boolean

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

Optional openMenuOnFocus

openMenuOnFocus?: boolean

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

Optional options

options?: readonly (OptionType | GroupType)[]

Array of options that populate the select menu

Optional pageSize

pageSize?: number

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

Optional placeholder

placeholder?: ReactNode

Placeholder text for the select value

Optional 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

Optional styles

styles?: Partial<Styles<OptionType, IsMulti, GroupType>>

Style modifier methods

Optional tabIndex

tabIndex?: null | string

Sets the tabIndex attribute on the input

Optional tabSelectsValue

tabSelectsValue?: boolean

Select the currently focused option when the user presses tab

Optional theme

theme?: ThemeConfig

Theme modifier method

Optional value

value?: null | OptionType | readonly OptionType[]

The value of the select; reflected by the selected option

Generated using TypeDoc