reach
@reach/combobox
Accessible combobox (autocomplete or autosuggest) component for React.
A combobox is the combination of an <input type="text" /> and a list. The list is designed to help the user arrive at a value, but the value does not necessarily have to come from that list. Don't think of it like a <select />, but more of an <input type="text" /> with some suggestions. You can, however, validate that the value comes from the list, that's up to your app.
import {
Combobox,
ComboboxInput,
ComboboxPopover,
ComboboxList,
ComboboxOption,
ComboboxOptionText,
} from "@reach/combobox";
import "@reach/combobox/styles.css";
function Example() {
return (
<div>
<Combobox>
<ComboboxInput aria-labelledby="demo" />
<ComboboxPopover>
<ComboboxList aria-labelledby="demo">
<ComboboxOption value="Apple" />
<ComboboxOption value="Banana" />
<ComboboxOption value="Orange" />
<ComboboxOption value="Pineapple" />
<ComboboxOption value="Kiwi" />
</ComboboxList>
</ComboboxPopover>
</Combobox>
</div>
);
}