# @s-ui/react-molecule-autosuggest > `MoleculeAutosuggest` is an input that will display a list of suggestions while values are entered It allows Single and Multiple Selection Latest version **2.76.0** (published 2026-02-25) · MIT license · 0 weekly downloads ## Install ```sh npm install @s-ui/react-molecule-autosuggest pnpm add @s-ui/react-molecule-autosuggest yarn add @s-ui/react-molecule-autosuggest bun add @s-ui/react-molecule-autosuggest ``` ## Health **Score 50/100 (C)** — status: stable. Positive: no vulnerabilities; high maintenance score. Warnings: low downloads; no types; no esm support. ## Facts | | | |---|---| | Version | 2.76.0 | | Published | 2026-02-25 | | First published | 2019-02-15 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 7 | | Unpacked size | 33.3 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 147 | | Maintainers | ivanmlaborda, salvador.juan, andresin87.adevinta, izeller, gfabregoadv, ignacio_navarro, oscar_ramirez, jordi.munoz, luis-garrido, jenifer.lopez, isabelgomez87, pa.chruscinski.ext, schibstedspain, belen.santos, xavi_ballestar, ferrangbtw, sabri-castelli, jamile.radloff, davidmartin2108, sergi.quintela, estefania_garcia, arnau.guell, ferran.simon, victor.perez.adevinta, mariapaula.forero.ext, oscar.gomez, david.nieto, oriol.puig, xavi.murcia, ignacio.rodriguez, francisco.ruiz.lloret, sziauberyte, andresadv, javiauso, alverd004, marian.lucaci, pablogs, sergiocollado, pablo.rey-adevinta, beatrizip, david.cuadrado.ext, giovanny.sayas.ext, patricio.sartore, azahara, sergio.escano, pol.valls, hpintos_adevinta, oscar-raig-adevinta, thomas.page.ext, sebastian.badea.adevinta, victoria.pasichnyk.ext, sendami.luque.ext, luz_adv, ruben-martin, emiliovz, arturo.vicente, diegomr, sergi.martinez.adevinta, guillemgc3, marc.sarroca.adevinta, javi-casado, maider-hernandorena-adevinta, javiermiguel, atilioscolaroadv, florinz, denis_z, anya_ok, hector-prieto-moreno, mirceasima-adv | | Keywords | @s-ui, react, component, molecule, autosuggest | ## Links - npm: https://www.npmjs.com/package/@s-ui/react-molecule-autosuggest - Repository: https://github.com/SUI-Components/sui-components - Homepage: https://sui-components.vercel.app/ - Issues: https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3A%22Component%3A+autosuggest%22 - npm.io page: https://npm.io/package/@s-ui/react-molecule-autosuggest ## Dependencies (7) - [@s-ui/js](https://npm.io/package/@s-ui/js.md) 2 - [lodash.isequal](https://npm.io/package/lodash.isequal.md) 4.5 - [@s-ui/react-hooks](https://npm.io/package/@s-ui/react-hooks.md) 1 - [@s-ui/react-atom-input](https://npm.io/package/@s-ui/react-atom-input.md) 5 - [@s-ui/react-primitive-injector](https://npm.io/package/@s-ui/react-primitive-injector.md) 1 - [@s-ui/react-molecule-input-tags](https://npm.io/package/@s-ui/react-molecule-input-tags.md) 3 - [@s-ui/react-molecule-dropdown-list](https://npm.io/package/@s-ui/react-molecule-dropdown-list.md) 2 ## Recent versions - 2.76.0 (latest) — 2026-02-25 - 2.66.0-beta.0 (beta) — 2022-10-26 - 2.75.0 — 2026-01-12 - 2.74.0 — 2025-11-20 - 2.73.0 — 2025-08-22 - 2.72.0 — 2025-08-07 - 2.71.0 — 2025-06-20 - 2.70.0 — 2025-05-09 - 2.69.0 — 2023-12-29 - 2.68.0 — 2023-08-25 - 2.67.0 — 2022-11-15 - 2.66.0 — 2022-10-04 - 2.65.0-beta.0 — 2022-09-23 - 2.65.0 — 2022-08-22 - 2.64.0 — 2022-08-19 - … 76 more at https://npm.io/package/@s-ui/react-molecule-autosuggest/versions ## README # MoleculeAutosuggest `MoleculeAutosuggest` is an input that will display a list of suggestions while values are entered It allows Single and Multiple Selection [![documentation](https://img.shields.io/badge/read%20the%20doc-black?logo=readthedocs)](https://sui-components.vercel.app/workbench/molecule/autosuggest/) [![issue](https://img.shields.io/badge/report%20a%20bug-black?logo=openbugbounty&logoColor=red)](https://github.com/SUI-Components/sui-components/issues/new?&projects=4&template=bug-report.yml&assignees=&template=report-a-bug.yml&title=🪲+&labels=bug,component,molecule,autosuggest) [![npm](https://img.shields.io/npm/dt/%40s-ui/react-molecule-autosuggest?logo=npm&labelColor=black)](https://www.npmjs.com/package/@s-ui/react-molecule-autosuggest) [![Issues open](https://img.shields.io/github/issues-search/SUI-Components/sui-components?query=is%3Aopen%20label%3Acomponent%20label%3Aautosuggest&logo=openbugbounty&logoColor=red&label=issues%20open&color=red)](https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3Acomponent+label%3Aautosuggest) [![NPM](https://img.shields.io/npm/l/%40s-ui%2Freact-molecule-autosuggest)](https://github.com/SUI-Components/sui-components/blob/main/components/molecule/autosuggest/LICENSE.md) ## Installation ```sh $ npm install @s-ui/react-molecule-autosuggest --save ``` ## Usage ```js import MoleculeAutosuggest, { MoleculeAutosuggestDropdownListSizes } from '@s-ui/react-molecule-autosuggest' import MoleculeAutosuggestOption from '@s-ui/react-molecule-dropdown-option' const IconCloseTag = () => x const IconClear = () => x const suggestions = ['John','Johnny'] ``` ### Single Selection #### Basic usage ```js } state="success" > {suggestions.map((suggestion, i) => ( {option} ))} ``` #### Large List ```js } size={MoleculeAutosuggestDropdownListSizes.LARGE} > {suggestions.map((suggestion, i) => ( {option} ))} ``` ### Multiple Selection #### Basic usage ```js } iconClear={} multiselection > {suggestions.map((suggestion, i) => ( {option} ))} ``` #### With Right Icon You can add a right icon to the multiselection input: ```js } iconClear={} rightIcon={} multiselection > {suggestions.map((suggestion, i) => ( {option} ))} ``` #### With Right Icon and Click Handler The right icon can be interactive with an `onClickRightIcon` callback: ```js } iconClear={} rightIcon={} onClickRightIcon={(ev, {value}) => { console.log('Right icon clicked with value:', value) }} multiselection > {suggestions.map((suggestion, i) => ( {option} ))} ``` ### Managing State #### Custom component from `MoleculeAutosuggest` that handle State `MoleculeAutosuggest` is a stateless component so to manage dynamic options we need to create a wrapper component that manages this and pass proper `props` and proper children (`MoleculeAutosuggestOption`) to `MoleculeAutosuggest` Example: ```js import React, {Component} from 'react' import MoleculeAutosuggest from '@s-ui/react-molecule-autosuggest' import MoleculeAutosuggestOption from '@s-ui/react-molecule-dropdown-option' import {getAsyncCountriesFromQuery} from '../services' export default class AutosuggestSingleWithAsyncOptions extends Component { state = {value: '', options: []} onChange = async (e, {value}) => { const options = await getAsyncCountriesFromQuery({query: value}) this.setState({value, options}) } render() { const {options, value} = this.state const {onChange, props} = this return ( {options.map((option, i) => ( {option} ))} ) } } ``` so then, the `AutosuggestSingleWithAsyncOptions` can used in this way... ```js } /> ``` #### Using an hoc like `withDynamicOptions` It can be useful creating a hoc (like the one `withDynamicOptions` available in the demo) that combined with other hoc from `@s-ui/hoc` can be used to simplify the use of this component with dinamyc suggestions based on the `value` **`withDynamicOptions`** ```js import React, {Component} from 'react' export default (BaseComponent, BaseChildComponent) => getDynamicOptions => { const displayName = BaseComponent.displayName return class withDynamicOptions extends Component { static displayName = `withDynamicOptions(${displayName})` state = { options: []} async componentDidUpdate({value: prevQuery}) { const {value: query} = this.props if (query !== prevQuery) { const options = await getDynamicOptions({query}) this.setState({options}) // eslint-disable-line } } render() { const {props} = this const {options} = this.state return ( {options.map((option, i) => ( {option} ))} ) } } } ``` use of `withDynamicOptions` for creating a stateful version of `MoleculeAutosuggest` ```js import MoleculeAutosuggest from '@s-ui/react-molecule-autosuggest' import MoleculeAutosuggestOption from '@s-ui/react-molecule-dropdown-option' import withDynamicOptions from './hoc/withDynamicOptions' import {withStateValue} from '@s-ui/hoc' // some function that gets a `{query}` and returns asynchronoudly a list of values import {getAsyncCountriesFromQuery} from './services' const MoleculeAutosuggestWithDynamicOptions = withDynamicOptions( MoleculeAutosuggest, MoleculeAutosuggestOption )(getAsyncCountriesFromQuery) const MoleculeAutosuggestWithState = withStateValue( MoleculeAutosuggestWithDynamicOptions ) ``` so then, the `MoleculeAutosuggestWithState` can used in this way... ```js console.log(value)} iconClear={} /> ``` > **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/molecule/autosuggest/demo).** --- _Source: https://npm.io/package/@s-ui/react-molecule-autosuggest · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._