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
import {
Select,
SelectItem,
SelectLabel,
SelectPopover,
useSelectState,
} from "ariakit/select";
import "./style.css";
export default function Example() {
const select = useSelectState({
defaultValue: "Apple",
sameWidth: true,
gutter: 4,
});
return (
<div className="wrapper">
<SelectLabel state={select}>Favorite fruit</SelectLabel>
<Select state={select} className="select" />
<SelectPopover state={select} className="popover">
<SelectItem className="select-item" value="Apple" />
<SelectItem className="select-item" value="Banana" />
<SelectItem className="select-item" value="Grape" disabled />
<SelectItem className="select-item" value="Orange" />
</SelectPopover>
</div>
);
}