Ariakit
/

Animated Combobox

Animating a Combobox using CSS transitions in React. The component waits for the transition to finish before completely hiding the popover using the animated prop.

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 fruit
<Ariakit.Combobox placeholder="e.g., Apple" className="combobox" />
</label>
<Ariakit.ComboboxPopover gutter={4} sameWidth className="popover">
<Ariakit.ComboboxItem className="combobox-item" value="Apple">
🍎 Apple
<Ariakit.ComboboxItem className="combobox-item" value="Grape">
🍇 Grape
<Ariakit.ComboboxItem className="combobox-item" value="Orange">
🍊 Orange
<Ariakit.ComboboxItem className="combobox-item" value="Strawberry">
🍓 Strawberry
<Ariakit.ComboboxItem className="combobox-item" value="Watermelon">
🍉 Watermelon
</div>
);
}

Components

Styling

When the animated prop is set to true on the ComboboxProvider component, Ariakit will assign the data-enter and data-leave attributes to the popover. You can use these attributes as selectors to add CSS transitions to the popover.

.popover {
opacity: 0;
transition: opacity 150ms;
}
.popover[data-enter] {
opacity: 1;
}

Learn more on the Styling guide.

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.