1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import {
Combobox,
ComboboxItem,
ComboboxPopover,
useComboboxState,
} from "ariakit/combobox";
import "./style.css";
export default function Example() {
const combobox = useComboboxState({ gutter: 8, sameWidth: 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>
);
}