12345678910111213141516171819202122232425262728293031323334353637383940414243444546import { Combobox, ComboboxItem, ComboboxPopover, useComboboxState, } from "ariakit/combobox"; import "./style.css"; export default function Example() { const combobox = useComboboxState({ gutter: 8, sameWidth: true, animated: true, }); return ( <div> <label className="label"> Your favorite fruit <Combobox state={combobox} placeholder="e.g., Apple" className="combobox" /> </label> <ComboboxPopover state={combobox} className="popover"> <ComboboxItem className="combobox-item" value="Apple"> 🍎 Apple </ComboboxItem> <ComboboxItem className="combobox-item" value="Grape"> 🍇 Grape </ComboboxItem> <ComboboxItem className="combobox-item" value="Orange"> 🍊 Orange </ComboboxItem> <ComboboxItem className="combobox-item" value="Strawberry"> 🍓 Strawberry </ComboboxItem> <ComboboxItem className="combobox-item" value="Watermelon"> 🍉 Watermelon </ComboboxItem> </ComboboxPopover> </div> ); }