Interface: SelectProps<T>#
Renderer.Component.SelectProps
Type parameters#
Name | Type |
---|---|
T |
any |
Hierarchy#
-
StateManagerProps
<T
,boolean
> -
CreatableProps
<T
,boolean
,GroupBase
<T
>>
↳ SelectProps
Table of contents#
Properties#
- allowCreateWhileLoading
- aria-errormessage
- aria-invalid
- aria-label
- aria-labelledby
- aria-live
- ariaLiveMessages
- autoConvertOptions
- autoFocus
- backspaceRemovesValue
- blurInputOnSelect
- captureMenuScroll
- className
- classNamePrefix
- closeMenuOnScroll
- closeMenuOnSelect
- components
- controlShouldRenderValue
- createOptionPosition
- defaultInputValue
- defaultMenuIsOpen
- defaultValue
- delimiter
- escapeClearsValue
- filterOption
- form
- formatGroupLabel
- formatOptionLabel
- getOptionLabel
- getOptionValue
- hideSelectedOptions
- id
- inputId
- inputValue
- instanceId
- isClearable
- isCreatable
- isDisabled
- isLoading
- isMulti
- isOptionDisabled
- isOptionSelected
- isRtl
- isSearchable
- loadingMessage
- maxMenuHeight
- menuClass
- menuIsOpen
- menuPlacement
- menuPortalTarget
- menuPosition
- menuShouldBlockScroll
- menuShouldScrollIntoView
- minMenuHeight
- name
- noOptionsMessage
- onBlur
- onFocus
- onKeyDown
- onMenuScrollToBottom
- onMenuScrollToTop
- openMenuOnClick
- openMenuOnFocus
- options
- pageSize
- placeholder
- screenReaderStatus
- styles
- tabIndex
- tabSelectsValue
- theme
- themeName
- value
Methods#
- formatCreateLabel
- getNewOptionData
- isValidNewOption
- onChange
- onCreateOption
- onInputChange
- onMenuClose
- onMenuOpen
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
menuClass#
• Optional
menuClass: string
menuIsOpen#
• Optional
menuIsOpen: boolean
Whether the menu is open
Inherited from#
ReactSelectProps.menuIsOpen
menuPlacement#
• 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
menuPortalTarget#
• 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
menuPosition#
• Optional
menuPosition: MenuPosition
The CSS position value of the menu, when "fixed" extra layout management is required
Inherited from#
ReactSelectProps.menuPosition
menuShouldBlockScroll#
• Optional
menuShouldBlockScroll: boolean
Whether to block scroll events when the menu is open
Inherited from#
ReactSelectProps.menuShouldBlockScroll
menuShouldScrollIntoView#
• 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