Ariakit
/

Radix Combobox

Using just the necessary Ariakit components to build a Combobox with Radix UI⁠. For projects already using Radix UI and looking for autocomplete, autosuggest and search features.

ComboboxDropdownsForm controlsRadix UI

Live example

Open preview in a new tab
import {

  Combobox,

  ComboboxItem,

  ComboboxLabel,

  ComboboxList,

  ComboboxProvider,

} from "@ariakit/react";

import * as RadixPopover from "@radix-ui/react-popover";

import { useRef, useState } from "react";

import "./style.css";



export default function Example() {

  const comboboxRef = useRef<HTMLInputElement>(null);

  const listboxRef = useRef<HTMLDivElement>(null);



  const [open, setOpen] = useState(false);



  return (

    <RadixPopover.Root open={open} onOpenChange={setOpen}>

      <ComboboxProvider open={open} setOpen={setOpen}>

        <ComboboxLabel className="label">Your favorite fruit</ComboboxLabel>

        <RadixPopover.Anchor asChild>

          <Combobox

            ref={comboboxRef}

            placeholder="e.g., Apple, Banana"

            className="combobox"

          />

        </RadixPopover.Anchor>

        <RadixPopover.Content

          asChild

          sideOffset={8}

          onOpenAutoFocus={(event) => event.preventDefault()}

          onInteractOutside={(event) => {

            const target = event.target as Element | null;

            const isCombobox = target === comboboxRef.current;

            const inListbox = target && listboxRef.current?.contains(target);

            if (isCombobox || inListbox) {

              event.preventDefault();

            }

          }}

        >

          <ComboboxList ref={listboxRef} role="listbox" className="listbox">

            <ComboboxItem focusOnHover className="option" value="Apple">

              🍎 Apple

            </ComboboxItem>

            <ComboboxItem focusOnHover className="option" value="Grape">

              🍇 Grape

            </ComboboxItem>

            <ComboboxItem focusOnHover className="option" value="Orange">

              🍊 Orange

            </ComboboxItem>

            <ComboboxItem focusOnHover className="option" value="Strawberry">

              🍓 Strawberry

            </ComboboxItem>

            <ComboboxItem focusOnHover className="option" value="Watermelon">

              🍉 Watermelon

            </ComboboxItem>

          </ComboboxList>

        </RadixPopover.Content>

      </ComboboxProvider>

    </RadixPopover.Root>

  );

}

Components

Explore the Ariakit components used in this example:

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

Basic structure

<RadixPopover.Root>

  <ComboboxProvider>

    <RadixPopover.Anchor asChild>

      <Combobox />

    </RadixPopover.Anchor>

    <RadixPopover.Content asChild>

      <ComboboxList>

        <ComboboxItem />

      </ComboboxList>

    </RadixPopover.Content>

  </ComboboxProvider>

</RadixPopover.Root>

Sharing state between Ariakit and Radix UI

We can share state between Ariakit and Radix UI by passing our own open state to both Radix's Root and Ariakit's ComboboxProvider:

const [open, setOpen] = useState(false);



<RadixPopover.Root open={open} onOpenChange={setOpen}>

  <ComboboxProvider open={open} setOpen={setOpen}>

You can learn more about this Ariakit feature in the guide:

Component providersProvide state to Ariakit components using a simple wrapper that supports controlled and uncontrolled props.

Composing PopoverContent with ComboboxList

Rather than using the ComboboxPopover component from Ariakit, we can use the Radix PopoverContent in conjunction with the Ariakit ComboboxList component, which doesn't bundle popover features.

Here are a few things to keep in mind when assembling these components:

  1. 1

    A combobox typically doesn't auto-focus when it opens, so we need to stop the Radix onOpenAutoFocus event from performing its default behavior:

    <RadixPopover.Content

      onOpenAutoFocus={(event) => event.preventDefault()}

    >
  2. 2

    We need to stop Radix from closing the popover when interacting with the Combobox or any component within ComboboxList:

    <RadixPopover.Content

      onInteractOutside={(event) => {

        const isCombobox = comboboxElement === event.target;

        const inListbox = listboxElement?.contains(event.target);

        if (isCombobox || inListbox) {

          event.preventDefault();

        }

      }}

    >
  3. 3

    Finally, we must explicitly set role="listbox" on the ComboboxList component, otherwise Radix will overwrite it with role="dialog".

More examples

Radix Select with ComboboxRendering a searchable Radix UI Select component with a text field that enables typeahead & autocomplete features using the primitive Ariakit Combobox components.
Radix DialogCreating a modal dialog primitive offering the same API as Radix UI but using the Ariakit Dialog component instead.
ComboboxGroupOrganizing Combobox items into labelled groups using the ComboboxGroup and ComboboxGroupLabel components in React.
Combobox with linksUsing a Combobox with items rendered as links that can be clicked with keyboard and mouse. This is useful for creating an accessible page search input in React.
ComboboxDisclosureOpening and closing a Combobox with the help of a button rendered next to it using the ComboboxDisclosure component.
ComboboxCancelReseting the value of a Combobox with a button rendered next to it using the ComboboxCancel component.
Combobox with TabsOrganizing Combobox with Tab components that support mouse, keyboard, and screen reader interactions. The UI remains responsive by using React.startTransition.
Command Menu with TabsCombining Dialog, Tab, and Combobox from Ariakit React to build a command palette component.
View all examples

Stay tuned

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

No spam. Unsubscribe anytime. Read latest issue⁠