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

Open preview in a new tab
Edit withViteNext.js
import "./style.css";
import * as Ariakit from "@ariakit/react";
export default function Example() {
return (
<div className="wrapper">
<label 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


Follow updates

Join 1,000+ subscribers and receive monthly updates with the latest improvements on Examples.

Read latest issue

No Spam. Unsubscribe at any time.