Country select

HTML ID of an element that should be used as a description (for assistive tech)

{@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)} Use descriptionId instead.

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

{@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)} aria-errormessage is not supported widely by assistive technologies. Do not use!

Indicate if the value entered in the field is invalid

{@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)} Use isInvalid instead.

Aria label (for assistive tech)

{@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)} Use label instead.

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

{@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)} Use labelId instead.

Used to set the priority with which screen reader should treat updates to live regions. The possible settings are: off, polite (default) or assertive

{@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)} Will be removed in future versions.

Customise the messages used by the aria-live component

{@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}

Focus the control when it is mounted. There are very few cases that this should be used, and using incorrectly may violate accessibility guidelines.

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

{@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}. Will soon be handled automatically to support expected keyboard accessibility.

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

{@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}

Sets a className attribute on the outer component

{@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)} If used for testing purposes, use the testId prop as a locator instead. If used for styling purposes, use the components API with the xcss prop

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.

Provide classNames based on state for each inner component

Set the aria-label for the clear icon button.

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.

{@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}

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 wish to restyle a component, we recommend using this prop with the xcss prop.

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

{@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}

You should not be accessing this prop under any circumstances. It is provided by @atlaskit/analytics-next and integrated in the component

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

{@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}

This sets the aria-describedby attribute. It sets an accessible description for the select, for people who use assistive technology. Use '<HelperMessage>' from '@atlaskit/form' is preferred.

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

{@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}. Will soon be handled automatically to support expected keyboard accessibility.

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

Sets the form attribute on the input

Formats group labels in the menu as React components

An example can be found in the Replacing builtins documentation.

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 invalid

Is the select in a state of loading (async)

Support multiple selected options

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

This prop indicates if the component is required.

Is the select direction right-to-left

{@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}

Whether to enable search functionality

This sets the aria-label attribute. It sets an accessible name for the select, for people who use assistive technology. Use of a visible label is highly recommended for greater accessibility support.

This sets the aria-labelledby attribute. It sets an accessible name for the select, for people who use assistive technology. Use of a visible label is highly recommended for greater accessibility support.

Async: Text to display when loading options

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

Controls how the menu is rendered. The default popup mode uses the normal transient menu rendering. The inline mode keeps the menu open and renders it within the parent layout.

Whether to block scroll events when the menu is open

{@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}

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 change events on the select

Handle focus events on the control

Handle change events on the input

Handle key down events on the select

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

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

{@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}. Will soon be removed to support expected accessibility interactions.

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

{@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}. Will soon be removed to support expected accessibility interactions.

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

Marks the value-holding input as required for form validation

{@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)} Use isRequired instead.

Status to relay to screen readers

{@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}

Prevents "Escape" keydown event propagation

This prop affects the height of the select control. Compact is gridSize() * 4, default is gridSize * 5

Style modifier methods

{@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)} Use the components API with the xcss prop for custom styling.

Sets the tabIndex attribute on the input for focus. Since focus is already managed, the only acceptable value to be used is '-1' in rare cases when removing this field from the document tab order is required.

Select the currently focused option when the user presses tab

{@link https://hello.atlassian.net/browse/ENGHEALTH-14529 Internal documentation for deprecation (no external access)}. Will soon be handled automatically to support expected keyboard accessibility.

A unique string that appears as data attribute data-testid in the rendered code, serving as a hook for automated tests. Use this instead of using ARIA properties as locators.

• Container: ${testId}-select--container
• Control : ${testId}-select--control
• Value container: ${testId}-select--value-container
• Placeholder: ${testId}-select--placeholder
• Input container: ${testId}-select--input-container
• Input: ${testId}-select--input
• Indicators container: ${testId}-select--indicators-container
• Dropdown indicator: ${testId}-select--dropdown-indicator
• Clear indicator: ${testId}-select--clear-indicator
• Loading indicator: ${testId}-select--loading-indicator
• Listbox container: ${testId}-select--listbox-container
• Listbox: ${testId}-select--listbox
• Option group heading: ${testId}-select--group-${groupIndex}-heading
• Option: ${testId}-select--option-${id}

Use isInvalid instead. The state of validation if used in a form.

The value of the select; reflected by the selected option