Indicate if the value entered in the field is invalid
Aria label (for assistive tech)
HTML ID of an element that should be used as the label (for assistive tech)
Used to set the priority with which screen reader should treat updates to live regions. The possible settings are: off, polite (default) or assertive
Customize the messages used by the aria-live component
Focus the control when it is mounted
Remove the currently focused option when the user presses backspace when Select isClearable or isMulti
Remove focus from the input when the user selects an option (handy for dismissing the keyboard on touch devices)
When the user reaches the top/bottom of the menu, prevent scroll on the scroll-parent
Sets a className attribute on the outer component
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.
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.
Close the select menu when the user selects an option
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
Whether the value of the select, e.g. SingleValue, should be displayed in the control.
Delimiter used to join multiple values into a single HTML Input value
Clear all values when the user presses escape AND the menu is closed
Custom method to filter whether an option should be displayed in the menu
Sets the form attribute on the input
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.
Resolves option data to a string to compare options and specify value attributes
Hide the selected option from the menu
The id to set on the SelectContainer component.
The id of the search input
The value of the search input
Define an id prefix for the select components e.g. {your-id}-value
Is the select value clearable
Is the select disabled
Is the select in a state of loading (async)
Support multiple selected options
Is the select direction right-to-left
Whether to enable search functionality
Maximum height of the menu before scrolling
Whether the menu is open
Default placement of the menu in relation to the control. 'auto' will flip when there isn't enough space below the control.
Whether the menu should use a portal, and where it should attach
An example can be found in the Portaling documentation
The CSS position value of the menu, when "fixed" extra layout management is required
Whether to block scroll events when the menu is open
Whether the menu should be scrolled into view when it opens
Minimum height of the menu before flipping
Name of the HTML Input (optional - without this, no input will be rendered)
Handle blur events on the control
Handle focus events on the control
Handle key down events on the select
Allows control of whether the menu is opened when the Select is clicked
Allows control of whether the menu is opened when the Select is focused
Array of options that populate the select menu
Number of options to jump in menu when page{up|down} keys are used
Placeholder for the select value
Style modifier methods
A basic example can be found at the bottom of the Replacing builtins documentation.
Sets the tabIndex attribute on the input
Select the currently focused option when the user presses tab
Theme modifier method
The value of the select; reflected by the selected option
Formats group labels in the menu as React components
An example can be found in the Replacing builtins documentation.
Formats option labels in the menu and control as React components
Override the built-in logic to detect whether an option is disabled
An example can be found in the Replacing builtins documentation.
Override the built-in logic to detect whether an option is selected
Async: Text to display when loading options
Text to display when there are no options
Handle change events on the select
Handle change events on the input
Handle the menu closing
Handle the menu opening
Fired when the user scrolls to the bottom of the menu
Fired when the user scrolls to the top of the menu
Status to relay to screen readers
Generated using TypeDoc
HTML ID of an element containing an error message related to the input