Ariakit
/
This site is under construction Subscribe to updates

ComboboxDisclosure

Opening and closing a Combobox with the help of a button rendered next to it using the ComboboxDisclosure component.

import * as Ariakit from "@ariakit/react";
import "./style.css";
export default function Example() {
const combobox = Ariakit.useComboboxStore();
return (
<div className="wrapper">
<label className="label">
Your favorite food
<div className="combobox-wrapper">
<Ariakit.Combobox
store={combobox}
placeholder="e.g., Pizza"
className="combobox"
/>
<Ariakit.ComboboxDisclosure
store={combobox}
className="button secondary disclosure"
/>
</div>
</label>
<Ariakit.ComboboxPopover
store={combobox}
gutter={4}
sameWidth
className="popover"
>
<Ariakit.ComboboxItem className="combobox-item" value="Pizza">
🍕 Pizza
</Ariakit.ComboboxItem>
<Ariakit.ComboboxItem className="combobox-item" value="Burger">
🍔 Burger
</Ariakit.ComboboxItem>
<Ariakit.ComboboxItem className="combobox-item" value="Spaghetti">
🍝 Spaghetti
</Ariakit.ComboboxItem>
<Ariakit.ComboboxItem className="combobox-item" value="Sushi">
🍣 Sushi
</Ariakit.ComboboxItem>
</Ariakit.ComboboxPopover>
</div>
);
}