# @commercetools-uikit/async-select-input > An input component getting a selection from an asynchronously loaded list from the user. Latest version **20.6.7** (published 2026-07-17) · MIT license · 0 weekly downloads ## Install ```sh npm install @commercetools-uikit/async-select-input pnpm add @commercetools-uikit/async-select-input yarn add @commercetools-uikit/async-select-input bun add @commercetools-uikit/async-select-input ``` ## Health **Score 70/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 20.6.7 | | Published | 2026-07-17 | | First published | 2019-11-29 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 14 | | Unpacked size | 86.5 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Provenance | attested (GitHub Actions) | | GitHub stars | 154 | | Maintainers | emmenko, commercetools-admin, tdeekens | | Keywords | javascript, typescript, design-system, react, uikit | ## Links - npm: https://www.npmjs.com/package/@commercetools-uikit/async-select-input - Repository: https://github.com/commercetools/ui-kit - Homepage: https://uikit.commercetools.com - Issues: https://github.com/commercetools/ui-kit/issues - npm.io page: https://npm.io/package/@commercetools-uikit/async-select-input ## Dependencies (14) - [lodash](https://npm.io/package/lodash.md) 4.18.1 - [react-select](https://npm.io/package/react-select.md) 5.10.2 - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.20.13 - [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.10.5 - [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.10.5 - [@babel/runtime-corejs3](https://npm.io/package/@babel/runtime-corejs3.md) ^7.20.13 - [@commercetools-uikit/text](https://npm.io/package/@commercetools-uikit/text.md) ^20.6.7 - [@commercetools-uikit/icons](https://npm.io/package/@commercetools-uikit/icons.md) ^20.6.7 - [@commercetools-uikit/utils](https://npm.io/package/@commercetools-uikit/utils.md) ^20.6.7 - [@commercetools-uikit/spacings](https://npm.io/package/@commercetools-uikit/spacings.md) ^20.6.7 - [@commercetools-uikit/constraints](https://npm.io/package/@commercetools-uikit/constraints.md) ^20.6.7 - [@commercetools-uikit/select-utils](https://npm.io/package/@commercetools-uikit/select-utils.md) ^20.6.7 - [@commercetools-uikit/design-system](https://npm.io/package/@commercetools-uikit/design-system.md) ^20.6.7 - [@commercetools-uikit/loading-spinner](https://npm.io/package/@commercetools-uikit/loading-spinner.md) ^20.6.7 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 20.6.7 (latest) — 2026-07-17 - 0.0.0-canary-20260831181816 (canary) — 2026-08-31 - 0.0.0-FEC-938-ui-kit-post-pnpm-tooling-polish-catalogs-bundlewatch-bundlesize-20260518121756 (FEC-938-ui-kit-post-pnpm-tooling-polish-catalogs-bundlewatch-bundlesize) — 2026-05-18 - 0.0.0-migration-pnpm-20260513114959 (migration-pnpm) — 2026-05-13 - 0.0.0-CRAFT-2040-rich-text-input-destroys-hyperlink-tag-20260219190637 (CRAFT-2040-rich-text-input-destroys-hyperlink-tag) — 2026-02-19 - 0.0.0-fec-155-react-19-20250528075244 (fec-155-react-19) — 2025-05-28 - 0.0.0-FCT-1500-adjust-legacy-css-reset-20250527090339 (FCT-1500-adjust-legacy-css-reset) — 2025-05-27 - 0.0.0-SUPPORT-32352-de-ch-money-input-20250509174254 (SUPPORT-32352-de-ch-money-input) — 2025-05-09 - 0.0.0-main-20250115172531 (main) — 2025-01-15 - 0.0.0-preview-fec-155-react-19-20250113184401 (preview-fec-155-react-19) — 2025-01-13 - 0.0.0-preview-test-icon-entrypoints-20241212201418 (preview-test-icon-entrypoints) — 2024-12-12 - 0.0.0-preview-test-icon-pure-annotations-20241211181046 (preview-test-icon-pure-annotations) — 2024-12-11 - 0.0.0-preview-test-icon-bundle-20241210182318 (preview-test-icon-bundle) — 2024-12-10 - 0.0.0-preview-test-canary-preview-20241204111237 (preview-test-canary-preview) — 2024-12-04 - 0.0.0-preview-FCT-1187-20241024123200 (preview) — 2024-10-24 - … 1159 more at https://npm.io/package/@commercetools-uikit/async-select-input/versions ## README # AsyncSelectInput ## Description An input component getting a selection from an asynchronously loaded list from the user. ## Installation ``` pnpm add @commercetools-uikit/async-select-input ``` ``` npm --save install @commercetools-uikit/async-select-input ``` Additionally install the peer dependencies (if not present) ``` pnpm add react react-dom react-intl ``` ``` npm --save install react react-dom react-intl ``` ## Usage ```jsx import AsyncSelectInput from '@commercetools-uikit/async-select-input'; const Example = (props) => ( { // async fetch logic } } onChange={(event) => alert(event.target.value)} /> ); export default Example; ``` ## Properties | Props | Type | Required | Default | Description | | -------------------------- | ----------------------------------------------------------------------------------------------------- | :------: | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `horizontalConstraint` | `union`
Possible values:
`, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | | Horizontal size limit of the input fields. | | `hasError` | `boolean` | | | Indicates the input field has an error | | `hasWarning` | `boolean` | | | Indicates the input field has a warning | | `isReadOnly` | `boolean` | | | Indicates that the field is displaying read-only content | | `aria-label` | `AsyncProps['aria-label']` | | | Aria label (for assistive tech)
[Props from React select was used](https://react-select.com/props) | | `aria-labelledby` | `AsyncProps['aria-labelledby']` | | | HTML ID of an element that should be used as the label (for assistive tech)
[Props from React select was used](https://react-select.com/props) | | `aria-invalid` | `AsyncProps['aria-invalid']` | | | Indicate if the value entered in the input is invalid.
[Props from React select was used](https://react-select.com/props) | | `aria-errormessage` | `AsyncProps['aria-errormessage']` | | | HTML ID of an element containing an error message related to the input.
[Props from React select was used](https://react-select.com/props) | | `isAutofocussed` | `boolean` | | | Focus the control when it is mounted | | `backspaceRemovesValue` | `AsyncProps['backspaceRemovesValue']` | | | Remove the currently focused option when the user presses backspace
[Props from React select was used](https://react-select.com/props) | | `components` | `AsyncProps['components']` | | | Map of components to overwrite the default ones, see [what components you can override](https://react-select.com/components)
[Props from React select was used](https://react-select.com/props) | | `controlShouldRenderValue` | `AsyncProps['controlShouldRenderValue']` | | `true` | Control whether the selected values should be rendered in the control
[Props from React select was used](https://react-select.com/props) | | `filterOption` | `AsyncProps['filterOption']` | | | Custom method to filter whether an option should be displayed in the menu
[Props from React select was used](https://react-select.com/props) | | `hideSelectedOptions` | `AsyncProps['hideSelectedOptions']` | | | Custom method to determine whether selected options should be displayed in the menu
[Props from React select was used](https://react-select.com/props) | | `id` | `AsyncProps['inputId']` | | | The id of the search input
[Props from React select was used](https://react-select.com/props) | | `inputValue` | `AsyncProps['inputValue']` | | | The value of the search input
[Props from React select was used](https://react-select.com/props) | | `containerId` | `AsyncProps['id']` | | | The id to set on the SelectContainer component
[Props from React select was used](https://react-select.com/props) | | `isClearable` | `AsyncProps['isClearable']` | | | Is the select value clearable
[Props from React select was used](https://react-select.com/props) | | `isCondensed` | `boolean` | | | Use this property to reduce the paddings of the component for a ui compact variant | | `isDisabled` | `AsyncProps['isDisabled']` | | | Is the select disabled
[Props from React select was used](https://react-select.com/props) | | `isOptionDisabled` | `AsyncProps['isOptionDisabled']` | | | Override the built-in logic to detect whether an option is disabled
[Props from React select was used](https://react-select.com/props) | | `isMulti` | `AsyncProps['isMulti']` | | | Support multiple selected options
[Props from React select was used](https://react-select.com/props) | | `isSearchable` | `AsyncProps['isSearchable']` | | `true` | Whether to enable search functionality
[Props from React select was used](https://react-select.com/props) | | `menuIsOpen` | `AsyncProps['menuIsOpen']` | | | Can be used to enforce the select input to be opened
[Props from React select was used](https://react-select.com/props) | | `maxMenuHeight` | `AsyncProps['maxMenuHeight']` | | | Maximum height of the menu before scrolling
[Props from React select was used](https://react-select.com/props) | | `menuPortalTarget` | `AsyncProps['menuPortalTarget']` | | | Dom element to portal the select menu to
[Props from React select was used](https://react-select.com/props) | | `menuPortalZIndex` | `number` | | `1` | z-index value for the menu portal
Use in conjunction with `menuPortalTarget` | | `menuShouldBlockScroll` | `AsyncProps['menuShouldBlockScroll']` | | | whether the menu should block scroll while open
[Props from React select was used](https://react-select.com/props) | | `closeMenuOnSelect` | `AsyncProps['closeMenuOnSelect']` | | | Whether the menu should close after a value is selected. Defaults to `true`.
[Props from React select was used](https://react-select.com/props) | | `name` | `AsyncProps['name']` | | | Name of the HTML Input (optional - without this, no input will be rendered)
[Props from React select was used](https://react-select.com/props) | | `noOptionsMessage` | `AsyncProps['noOptionsMessage']` | | | Can be used to render a custom value when there are no options (either because of no search results, or all options have been used, or there were none in the first place). Gets called with `{ inputValue: String }`. `inputValue` will be an empty string when no search text is present.
[Props from React select was used](https://react-select.com/props) | | `onBlur` | `Function`
[See signature.](#signature-onblur) | | | Handle blur events on the control | | `onChange` | `Function`
[See signature.](#signature-onchange) | | | Called with a fake event when value changes. The event's `target.name` will be the `name` supplied in props. The event's `target.value` will hold the value. The value will be the selected option, or an array of options in case `isMulti` is `true`. | | `onFocus` | `AsyncProps['onFocus']` | | | Handle focus events on the control
[Props from React select was used](https://react-select.com/props) | | `onInputChange` | `AsyncProps['onInputChange']` | | | Handle change events on the input
[Props from React select was used](https://react-select.com/props) | | `placeholder` | `AsyncProps['placeholder']` | | | Placeholder text for the select value
[Props from React select was used](https://react-select.com/props) | | `loadingMessage` | `union`
Possible values:
`string , (() => string)` | | | loading message shown while the options are being loaded | | `tabIndex` | `AsyncProps['tabIndex']` | | | Sets the tabIndex attribute on the input
[Props from React select was used](https://react-select.com/props) | | `tabSelectsValue` | `AsyncProps['tabSelectsValue']` | | | Select the currently focused option when the user presses tab
[Props from React select was used](https://react-select.com/props) | | `value` | `AsyncProps['value']` | | `null` | The value of the select; reflected by the selected option
[Props from React select was used](https://react-select.com/props) | | `defaultOptions` | `union`
Possible values:
`OptionsOrGroups> , boolean` | | | The default set of options to show before the user starts searching. When set to true, the results for loadOptions('') will be autoloaded.
[Props from React select was used](https://react-select.com/props) | | `loadOptions` | `AsyncProps['loadOptions']` | ✅ | | Function that returns a promise, which is the set of options to be used once the promise resolves. | | `cacheOptions` | `AsyncProps['cacheOptions']` | | | If cacheOptions is truthy, then the loaded data will be cached. The cache will remain until cacheOptions changes value. | | `showOptionGroupDivider` | `boolean` | | | Determines if option groups will be separated by a divider | | `iconLeft` | `ReactNode` | | | Icon to display on the left of the placeholder text and selected value. Has no effect when `isMulti` is enabled. | | `optionStyle` | `union`
Possible values:
`'list' , 'checkbox'` | | `'list'` | defines how options are rendered | | `appearance` | `union`
Possible values:
`'default' , 'filter'` | | `'default'` | Indicates the appearance of the input. Filter appearance is meant to be used when the async-select is used as a filter. | | `count` | `number` | | | An additional value displayed on the select options menu. This value is only available in the checkbox option style when appearance is set to filter. | ## Signatures ### Signature `onBlur` ```ts (event: TCustomEvent) => void ``` ### Signature `onChange` ```ts (event: TCustomEvent, info: ActionMeta) => void ``` This input is built on top of [`react-select`](https://github.com/JedWatson/react-select) v2. It supports mostly same properties as `react-select`. Behavior for some props was changed, and support for others was dropped. In case you need one of the currently excluded props, feel free to open a PR adding them. ### Static Properties #### `isTouched(touched)` Returns truthy value for the Formik `touched` value of this input field. ## Components It is possible to customize `AsyncSelectInput` by passing the `components` property. `AsyncSelectInput` exports the default underlying components as static exports. Components available as static exports are: - `ClearIndicator` - `Control` - `CrossIcon` - `DownChevron` - `DropdownIndicator` - `Group` - `GroupHeading` - `IndicatorsContainer` - `IndicatorSeparator` - `Input` - `LoadingIndicator` - `LoadingMessage` - `Menu` - `MenuList` - `MenuPortal` - `MultiValue` - `MultiValueContainer` - `MultiValueLabel` - `MultiValueRemove` - `NoOptionsMessage` - `Option` - `Placeholder` - `SelectContainer` - `SingleValue` - `ValueContainer` See the [official documentation](https://react-select.com/components) for more information about the props they receive. --- _Source: https://npm.io/package/@commercetools-uikit/async-select-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._