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.

Combobox Animated CSS transitions Dropdowns Form controls

Your favorite fruit

Edit withVite Next.js

123456789101112131415161718192021222324252627282930313233
import "./style.css";
import * as Ariakit from "@ariakit/react";

export default function Example() {
  return (
    <div className="wrapper">
      <Ariakit.ComboboxProvider animated>
        <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>
          <Ariakit.ComboboxItem className="combobox-item" value="Grape">
            🍇 Grape
          </Ariakit.ComboboxItem>
          <Ariakit.ComboboxItem className="combobox-item" value="Orange">
            🍊 Orange
          </Ariakit.ComboboxItem>
          <Ariakit.ComboboxItem className="combobox-item" value="Strawberry">
            🍓 Strawberry
          </Ariakit.ComboboxItem>
          <Ariakit.ComboboxItem className="combobox-item" value="Watermelon">
            🍉 Watermelon
          </Ariakit.ComboboxItem>
        </Ariakit.ComboboxPopover>
      </Ariakit.ComboboxProvider>
    </div>
  );
}

import "./style.css";
import * as Ariakit from "@ariakit/react";

export default function Example() {
  return (
    <div className="wrapper">
      <Ariakit.ComboboxProvider animated>
        <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>
          <Ariakit.ComboboxItem className="combobox-item" value="Grape">
            🍇 Grape
          </Ariakit.ComboboxItem>
          <Ariakit.ComboboxItem className="combobox-item" value="Orange">
            🍊 Orange
          </Ariakit.ComboboxItem>
          <Ariakit.ComboboxItem className="combobox-item" value="Strawberry">
            🍓 Strawberry
          </Ariakit.ComboboxItem>
          <Ariakit.ComboboxItem className="combobox-item" value="Watermelon">
            🍉 Watermelon
          </Ariakit.ComboboxItem>
        </Ariakit.ComboboxPopover>
      </Ariakit.ComboboxProvider>
    </div>
  );
}

Components

ComboboxFill in a React input field with autocomplete & autosuggest functionalities. Choose from a list of suggested values with full keyboard support. This component is based on the WAI-ARIA Combobox Pattern.

View all components

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;
}
.popover {
  opacity: 0;
  transition: opacity 150ms;
}

.popover[data-enter] {
  opacity: 1;
}

Learn more on the Styling guide.

Related examples

Combobox with integrated filterFiltering options in a Combobox component through an abstracted implementation using React.useDeferredValue, resulting in a simple higher-level API.

Navigation MenubarUsing Menubar, Menu, and Portal to create an accessible, tabbable navigation menu widget with links and menu buttons that expand on hover and focus.

Animated DialogAnimating a modal Dialog and its backdrop element using CSS. The component waits for the transition to finish before completely hiding the dialog or removing it from the React tree.

Dialog with Framer MotionUsing Framer Motion to add initial and exit animations to a modal Dialog and its backdrop element.

Menu with Framer MotionAbstracting Menu into a reusable dropdown menu component that uses Framer Motion to create smooth initial and exit animations.

Tooltip with Framer MotionAbstracting Tooltip into a reusable custom component that uses Framer Motion to create smooth initial and exit animations.

View all examples

Follow updates

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

Read latest issue