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() {
return (
<Ariakit.ComboboxLabel className="label">
Your favorite food
<div className="combobox-wrapper">
<Ariakit.Combobox placeholder="e.g., Pizza" className="combobox" />
<Ariakit.ComboboxDisclosure className="button secondary disclosure" />
<Ariakit.ComboboxPopover gutter={4} sameWidth className="popover">
<Ariakit.ComboboxItem className="combobox-item" value="Pizza">
🍕 Pizza
<Ariakit.ComboboxItem className="combobox-item" value="Burger">
🍔 Burger
<Ariakit.ComboboxItem className="combobox-item" value="Spaghetti">
🍝 Spaghetti
<Ariakit.ComboboxItem className="combobox-item" value="Sushi">
🍣 Sushi

Stay tuned

Join 1,000+ subscribers and receive monthly tips & updates on new Ariakit content.

No spam. Unsubscribe anytime. Read latest issue