# @commercetools-uikit/selectable-search-input > A controlled selectable search input component for single-line strings with validation states. Latest version **20.6.7** (published 2026-07-17) · MIT license · 0 weekly downloads ## Install ```sh npm install @commercetools-uikit/selectable-search-input pnpm add @commercetools-uikit/selectable-search-input yarn add @commercetools-uikit/selectable-search-input bun add @commercetools-uikit/selectable-search-input ``` ## Health **Score 65/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; has provenance; high maintenance score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 20.6.7 | | Published | 2026-07-17 | | First published | 2023-02-23 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 15 | | Unpacked size | 448.9 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/selectable-search-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/selectable-search-input ## Dependencies (15) - [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/hooks](https://npm.io/package/@commercetools-uikit/hooks.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/constraints](https://npm.io/package/@commercetools-uikit/constraints.md) ^20.6.7 - [@commercetools-uikit/icon-button](https://npm.io/package/@commercetools-uikit/icon-button.md) ^20.6.7 - [@commercetools-uikit/input-utils](https://npm.io/package/@commercetools-uikit/input-utils.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/secondary-icon-button](https://npm.io/package/@commercetools-uikit/secondary-icon-button.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-20261022115605 (canary) — 2026-10-22 - 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 - … 545 more at https://npm.io/package/@commercetools-uikit/selectable-search-input/versions ## README # SelectableSearchInput ## Description A controlled selectable search input component for single-line strings with validation states. ## Installation ``` pnpm add @commercetools-uikit/selectable-search-input ``` ``` npm --save install @commercetools-uikit/selectable-search-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 SelectableSearchInput from '@commercetools-uikit/selectable-search-input'; const value = { text: 'foo', option: 'bar', }; const Example = () => ( alert(event.target.value)} onSubmit={(val) => alert(val)} onReset={() => alert('reset')} options={[ { value: 'one', label: 'One' }, { value: 'two', label: 'Two' }, ]} selectDataProps={[{ 'prop-1': 'value-1' }, { 'prop-2': 'value-2' }]} inputDataProps={[{ 'prop-3': 'value-1' }, { 'prop-4': 'value-2' }]} /> ); export default Example; ``` ## Properties | Props | Type | Required | Default | Description | | -------------------------- | -------------------------------------------------------------------------------------- | :------: | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `id` | `string` | | | Used as HTML id property. An id is auto-generated when it is not specified. | | `autoComplete` | `string` | | | Used as HTML autocomplete property | | `aria-invalid` | `boolean` | | | Indicate if the value entered in the input is invalid. | | `aria-errormessage` | `string` | | | HTML ID of an element containing an error message related to the input. | | `name` | `string` | | | Used as HTML name of the input component property. | | `value` | `Object`
[See signature.](#signature-value) | ✅ | | Value of the input. Consists of text input and selected option. | | `_experimentalValue` | `Object`
[See signature.](#signature-_experimentalvalue) | | | | | `onChange` | `Function`
[See signature.](#signature-onchange) | | | Called with the event of the input or dropdown when either the selectable dropdown or the text input have changed. The change event from the text input has a suffix of `.textInput` and the change event from the dropdown has a suffix of `.dropdown`. | | `onBlur` | `Function`
[See signature.](#signature-onblur) | | | Called when input is blurred | | `onFocus` | `Function`
[See signature.](#signature-onfocus) | | | Called when input is focused | | `onSubmit` | `Function`
[See signature.](#signature-onsubmit) | ✅ | | Handler when the search button is clicked. | | `onReset` | `Function`
[See signature.](#signature-onreset) | | | Handler when the clear button is clicked. | | `isAutofocussed` | `boolean` | | | Focus the input on initial render | | `isDisabled` | `boolean` | | | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). | | `isReadOnly` | `boolean` | | | Indicates that the field is displaying read-only content | | `hasError` | `boolean` | | | Indicates if the input has invalid values | | `hasWarning` | `boolean` | | | Indicates if the input has warning values | | `placeholder` | `string` | | | Placeholder text for the input | | `isClearable` | `boolean` | | `true` | Indicates if the input should be cleared when the clear button is clicked. Defaults to true. | | `isCondensed` | `boolean` | | | Use this property to reduce the paddings of the component for a ui compact variant | | `horizontalConstraint` | `union`
Possible values:
`10 , 11 , 12 , 13 , 14 , 15 , 16 , 'scale' , 'auto'` | | `'scale'` | Horizontal size limit of the input fields. | | `options` | `union`
Possible values:
`TOption[] , TOptionObject[]` | ✅ | | Array of options that populate the select menu | | `menuPortalZIndex` | `number` | | `1` | z-index value for the menu portal
Use in conjunction with `menuPortalTarget` | | `menuPortalTarget` | `ReactSelectProps['menuPortalTarget']` | | | Dom element to portal the select menu to
[Props from React select was used](https://react-select.com/props) | | `menuShouldBlockScroll` | `ReactSelectProps['menuShouldBlockScroll']` | | | whether the menu should block scroll while open
[Props from React select was used](https://react-select.com/props) | | `onMenuInputChange` | `ReactSelectProps['onInputChange']` | | | Handle change events on the menu input
[Props from React select was used](https://react-select.com/props) | | `noMenuOptionsMessage` | `ReactSelectProps['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) | | `isMenuSearchable` | `ReactSelectProps['isSearchable']` | | | Whether to enable search functionality.
[Props from React select was used](https://react-select.com/props) | | `maxMenuHeight` | `ReactSelectProps['maxMenuHeight']` | | | Maximum height of the menu before scrolling
[Props from React select was used](https://react-select.com/props) | | `closeMenuOnSelect` | `ReactSelectProps['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) | | `menuHorizontalConstraint` | `union`
Possible values:
`3 , 4 , 5` | | `3` | Horizontal size limit for the dropdown menu. | | `showSubmitButton` | `boolean` | | `true` | Show submit button in the input | | `selectDataProps` | `Record` | | | used to pass data-\* props to the select component. eg: selectDataProps={\[{ 'prop-1': 'value-1' }, { 'prop-2': 'value-2' }]} | | `inputDataProps` | `Record` | | | used to pass data-\* props to the input element. eg: inputDataProps={\[{ 'prop-1': 'value-1' }, { 'prop-2': 'value-2' }]} | | `selectCustomComponents` | `ReactSelectProps['components']` | | | Map of components to overwrite the default ones, see what components you can override
[Props from React select was used](https://react-select.com/props) | | `rightActionIcon` | `ReactElement` | | | Custom action icon to be displayed on the right side of the input. | | `rightActionProps` | `TIconButtonProps` | | | Props for the right-action icon-button. Required when rightActionIcon is provided. At least a `label` and an `onClick` prop/function need to be provided. | ## Signatures ### Signature `value` ```ts { text: string; option: string; } ``` ### Signature `_experimentalValue` ```ts { text: string; option: string; } ``` ### Signature `onChange` ```ts (event: TCustomEvent) => void ``` ### Signature `onBlur` ```ts (event: TCustomEvent) => void ``` ### Signature `onFocus` ```ts (event: TCustomEvent) => void ``` ### Signature `onSubmit` ```ts (value: TValue) => void ``` ### Signature `onReset` ```ts () => void ``` ## `data-*` props The component further forwards all `data-` attributes to the underlying `input` component. ## Static methods ### `SelectableSearchInput.isEmpty` Returns `true` when the value is considered empty, which is when the value is empty or consists of spaces only. ```js SelectableSearchInput.isEmpty({ text: '', option: '', }); // -> true SelectableSearchInput.isEmpty({ text: ' ', option: 'bar', }); // -> true SelectableSearchInput.isEmpty({ text: 'foo', option: 'bar', }); // -> false ``` ## Main Functions and use cases are: - Input field for single-line strings. Used for selectable search. --- _Source: https://npm.io/package/@commercetools-uikit/selectable-search-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._