Animated Select

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

Combobox Animated CSS transitions Dropdowns Form controls

Edit example

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

export default function Example() {
  return (
    <div className="wrapper">
      <Ariakit.ComboboxProvider defaultSelectedValue="Apple">
        <Ariakit.ComboboxSelectLabel className="label">
          Favorite fruit
        </Ariakit.ComboboxSelectLabel>
        <Ariakit.ComboboxSelect className="button" />
        <Ariakit.ComboboxPopover
          portal
          sameWidth
          unmountOnHide
          gutter={4}
          className="popover"
        >
          <Ariakit.ComboboxItem className="select-item" value="Apple" />
          <Ariakit.ComboboxItem className="select-item" value="Banana" />
          <Ariakit.ComboboxItem className="select-item" value="Grape" />
          <Ariakit.ComboboxItem className="select-item" value="Orange" />
        </Ariakit.ComboboxPopover>
      </Ariakit.ComboboxProvider>
    </div>
  );
}

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

export default function Example() {
  return (
    <div className="wrapper">
      <Ariakit.ComboboxProvider defaultSelectedValue="Apple">
        <Ariakit.ComboboxSelectLabel className="label">
          Favorite fruit
        </Ariakit.ComboboxSelectLabel>
        <Ariakit.ComboboxSelect className="button" />
        <Ariakit.ComboboxPopover
          portal
          sameWidth
          unmountOnHide
          gutter={4}
          className="popover"
        >
          <Ariakit.ComboboxItem className="select-item" value="Apple" />
          <Ariakit.ComboboxItem className="select-item" value="Banana" />
          <Ariakit.ComboboxItem className="select-item" value="Grape" />
          <Ariakit.ComboboxItem className="select-item" value="Orange" />
        </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

Styling the animation

Use the data-enter and data-leave attributes to animate the ComboboxPopover component using CSS transitions:

.popover {
  opacity: 0;
  transition: opacity 150ms;
}

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

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

For more information on styling with Ariakit, refer to the Styling guide.

Related examples

Searchable Combobox SelectCombining ComboboxSelect and ComboboxInput in the same Combobox provider to create a dropdown with a search field that filters its items.

Select groupSeparating Combobox items into groups using the ComboboxGroup and ComboboxGroupLabel components.

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.

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

Toolbar with SelectRendering ComboboxSelect as a ToolbarItem inside a Toolbar.

Combobox Select with Next.js App RouterControlling the selected value of a Combobox via the URL using the Next.js App Router and React.useOptimistic to ensure a responsive and accessible UI.

View all examples

Animated Select

Components

Styling the animation

Related examples

Stay tuned