Filtering the suggestions in a Combobox using the list
prop from the useComboboxState
hook.
12345678910111213141516171819202122232425262728293031323334import { Combobox, ComboboxItem, ComboboxPopover, useComboboxState, } from "ariakit/combobox"; import list from "./list"; import "./style.css"; export default function Example() { const combobox = useComboboxState({ gutter: 8, sameWidth: true, list }); return ( <div className="wrapper"> <label className="label"> Your favorite food <Combobox state={combobox} placeholder="e.g., Apple" className="combobox" /> </label> <ComboboxPopover state={combobox} className="popover"> {combobox.matches.length ? ( combobox.matches.map((value) => ( <ComboboxItem key={value} value={value} className="combobox-item" /> )) ) : ( <div className="no-results">No results found</div> )} </ComboboxPopover> </div> ); }