Skip to content

Interface: NamespaceSelectProps<IsMulti>#

Renderer.Component.NamespaceSelectProps

Type parameters#

Name Type
IsMulti extends boolean

Hierarchy#

  • Omit<SelectProps<string, { label: string ; value: string }, IsMulti>, "options" | "value">

↳ NamespaceSelectProps

Table of contents#

Properties#

Properties#

aria-errormessage#

• Optional aria-errormessage: string

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

Inherited from#

Omit.aria-errormessage

aria-invalid#

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

Indicate if the value entered in the field is invalid *

Inherited from#

Omit.aria-invalid

aria-label#

• Optional aria-label: string

Aria label (for assistive tech)

Inherited from#

Omit.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#

Omit.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#

Omit.aria-live

ariaLiveMessages#

• Optional ariaLiveMessages: AriaLiveMessages<{ label: string ; value: string }, IsMulti, GroupBase<{ label: string ; value: string }>>

Customize the messages used by the aria-live component

Inherited from#

Omit.ariaLiveMessages

autoConvertOptions#

• Optional autoConvertOptions: boolean

deprecated We will always auto convert options if they are of type string

Inherited from#

Omit.autoConvertOptions

autoFocus#

• Optional autoFocus: boolean

Focus the control when it is mounted

Inherited from#

Omit.autoFocus

backspaceRemovesValue#

• Optional backspaceRemovesValue: boolean

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

Inherited from#

Omit.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#

Omit.blurInputOnSelect

captureMenuScroll#

• Optional captureMenuScroll: boolean

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

Inherited from#

Omit.captureMenuScroll

className#

• Optional className: string

Sets a className attribute on the outer component

Inherited from#

Omit.className

classNamePrefix#

• Optional 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.

Inherited from#

Omit.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#

Omit.closeMenuOnScroll

closeMenuOnSelect#

• Optional closeMenuOnSelect: boolean

Close the select menu when the user selects an option

Inherited from#

Omit.closeMenuOnSelect

components#

• Optional components: Partial<SelectComponents<{ label: string ; value: string }, IsMulti, GroupBase<{ label: string ; value: string }>>>

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#

Omit.components

controlShouldRenderValue#

• Optional controlShouldRenderValue: boolean

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

Inherited from#

Omit.controlShouldRenderValue

defaultInputValue#

• Optional defaultInputValue: string

Inherited from#

Omit.defaultInputValue

defaultMenuIsOpen#

• Optional defaultMenuIsOpen: boolean

Inherited from#

Omit.defaultMenuIsOpen

defaultValue#

• Optional defaultValue: PropsValue<{ label: string ; value: string }>

Inherited from#

Omit.defaultValue

delimiter#

• Optional delimiter: string

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

Inherited from#

Omit.delimiter

escapeClearsValue#

• Optional escapeClearsValue: boolean

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

Inherited from#

Omit.escapeClearsValue

filterOption#

• Optional filterOption: null | (option: FilterOptionOption<{ label: string ; value: string }>, inputValue: string) => boolean

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

Inherited from#

Omit.filterOption

form#

• Optional form: string

Sets the form attribute on the input

Inherited from#

Omit.form

formatGroupLabel#

• Optional formatGroupLabel: (group: GroupBase<{ label: string ; value: string }>) => 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<{ label: string ; value: string }>
Returns#

ReactNode

Inherited from#

Omit.formatGroupLabel

formatOptionLabel#

• Optional formatOptionLabel: (data: { label: string ; value: string }, formatOptionLabelMeta: FormatOptionLabelMeta<{ label: string ; value: string }>) => ReactNode

Type declaration#

▸ (data, formatOptionLabelMeta): ReactNode

Formats option labels in the menu and control as React components

Parameters#
Name Type
data Object
data.label string
data.value string
formatOptionLabelMeta FormatOptionLabelMeta<{ label: string ; value: string }>
Returns#

ReactNode

Inherited from#

Omit.formatOptionLabel

getOptionLabel#

• Optional getOptionLabel: GetOptionLabel<{ label: string ; value: string }>

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#

Omit.getOptionLabel

getOptionValue#

• Optional getOptionValue: GetOptionValue<{ label: string ; value: string }>

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

Inherited from#

Omit.getOptionValue

hideSelectedOptions#

• Optional hideSelectedOptions: boolean

Hide the selected option from the menu

Inherited from#

Omit.hideSelectedOptions

id#

• Optional id: string

Inherited from#

Omit.id

inputId#

• Optional inputId: string

The id of the search input

Inherited from#

Omit.inputId

inputValue#

• Optional inputValue: string

The value of the search input

Inherited from#

Omit.inputValue

instanceId#

• Optional instanceId: string | number

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

Inherited from#

Omit.instanceId

isClearable#

• Optional isClearable: boolean

Is the select value clearable

Inherited from#

Omit.isClearable

isCreatable#

• Optional isCreatable: boolean

deprecated This option does nothing

Inherited from#

Omit.isCreatable

isDisabled#

• Optional isDisabled: boolean

Is the select disabled

Inherited from#

Omit.isDisabled

isLoading#

• Optional isLoading: boolean

Is the select in a state of loading (async)

Inherited from#

Omit.isLoading

isMulti#

• Optional isMulti: IsMulti

Support multiple selected options

Inherited from#

Omit.isMulti

isOptionDisabled#

• Optional isOptionDisabled: (option: { label: string ; value: string }, selectValue: Options<{ label: string ; value: string }>) => 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 Object
option.label string
option.value string
selectValue Options<{ label: string ; value: string }>
Returns#

boolean

Inherited from#

Omit.isOptionDisabled

isOptionSelected#

• Optional isOptionSelected: (option: { label: string ; value: string }, selectValue: Options<{ label: string ; value: string }>) => boolean

Type declaration#

▸ (option, selectValue): boolean

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

Parameters#
Name Type
option Object
option.label string
option.value string
selectValue Options<{ label: string ; value: string }>
Returns#

boolean

Inherited from#

Omit.isOptionSelected

isRtl#

• Optional isRtl: boolean

Is the select direction right-to-left

Inherited from#

Omit.isRtl

isSearchable#

• Optional isSearchable: boolean

Whether to enable search functionality

Inherited from#

Omit.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#

Omit.loadingMessage

maxMenuHeight#

• Optional maxMenuHeight: number

Maximum height of the menu before scrolling

Inherited from#

Omit.maxMenuHeight

• Optional menuClass: string

Inherited from#

Omit.menuClass

• Optional menuIsOpen: boolean

Whether the menu is open

Inherited from#

Omit.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#

Omit.menuPlacement

• Optional menuPortalTarget: null | HTMLElement

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

An example can be found in the Portaling documentation

Inherited from#

Omit.menuPortalTarget

• Optional menuPosition: MenuPosition

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

Inherited from#

Omit.menuPosition

• Optional menuShouldBlockScroll: boolean

Whether to block scroll events when the menu is open

Inherited from#

Omit.menuShouldBlockScroll

• Optional menuShouldScrollIntoView: boolean

Whether the menu should be scrolled into view when it opens

Inherited from#

Omit.menuShouldScrollIntoView

minMenuHeight#

• Optional minMenuHeight: number

Minimum height of the menu before flipping

Inherited from#

Omit.minMenuHeight

name#

• Optional name: string

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

Inherited from#

Omit.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#

Omit.noOptionsMessage

onBlur#

• Optional onBlur: FocusEventHandler<HTMLInputElement>

Handle blur events on the control

Inherited from#

Omit.onBlur

onChange#

• Optional onChange: (newValue: OnChangeValue<{ label: string ; value: string }, IsMulti>, actionMeta: ActionMeta<{ label: string ; value: string }>) => void

Type declaration#

▸ (newValue, actionMeta): void

Handle change events on the select

Parameters#
Name Type
newValue OnChangeValue<{ label: string ; value: string }, IsMulti>
actionMeta ActionMeta<{ label: string ; value: string }>
Returns#

void

Inherited from#

Omit.onChange

onFocus#

• Optional onFocus: FocusEventHandler<HTMLInputElement>

Handle focus events on the control

Inherited from#

Omit.onFocus

onInputChange#

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

Type declaration#

▸ (newValue, actionMeta): void

Handle change events on the input

Parameters#
Name Type
newValue string
actionMeta InputActionMeta
Returns#

void

Inherited from#

Omit.onInputChange

onKeyDown#

• Optional onKeyDown: KeyboardEventHandler<HTMLDivElement>

Handle key down events on the select

Inherited from#

Omit.onKeyDown

onMenuClose#

• Optional onMenuClose: () => void

Type declaration#

▸ (): void

Handle the menu closing

Returns#

void

Inherited from#

Omit.onMenuClose

onMenuOpen#

• Optional onMenuOpen: () => void

Type declaration#

▸ (): void

Handle the menu opening

Returns#

void

Inherited from#

Omit.onMenuOpen

onMenuScrollToBottom#

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

Type declaration#

▸ (event): void

Fired when the user scrolls to the bottom of the menu

Parameters#
Name Type
event TouchEvent | WheelEvent
Returns#

void

Inherited from#

Omit.onMenuScrollToBottom

onMenuScrollToTop#

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

Type declaration#

▸ (event): void

Fired when the user scrolls to the top of the menu

Parameters#
Name Type
event TouchEvent | WheelEvent
Returns#

void

Inherited from#

Omit.onMenuScrollToTop

openMenuOnClick#

• Optional openMenuOnClick: boolean

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

Inherited from#

Omit.openMenuOnClick

openMenuOnFocus#

• Optional openMenuOnFocus: boolean

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

Inherited from#

Omit.openMenuOnFocus

pageSize#

• Optional pageSize: number

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

Inherited from#

Omit.pageSize

placeholder#

• Optional placeholder: ReactNode

Placeholder for the select value

Inherited from#

Omit.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#

Omit.screenReaderStatus

showIcons#

• Optional showIcons: boolean

sort#

• Optional sort: NamespaceSelectSort

styles#

• Optional styles: StylesConfig<{ label: string ; value: string }, IsMulti, GroupBase<{ label: string ; value: string }>>

Style modifier methods

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

Inherited from#

Omit.styles

tabIndex#

• Optional tabIndex: number

Sets the tabIndex attribute on the input

Inherited from#

Omit.tabIndex

tabSelectsValue#

• Optional tabSelectsValue: boolean

Select the currently focused option when the user presses tab

Inherited from#

Omit.tabSelectsValue

theme#

• Optional theme: ThemeConfig

Theme modifier method

Inherited from#

Omit.theme

themeName#

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

Inherited from#

Omit.themeName

value#

• value: undefined | null | string