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.

Combobox Dropdowns Form controls Radix UI

Live example

Your favorite fruit

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
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>
  );
}

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>
<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}>
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:

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()}
>
<RadixPopover.Content
  onOpenAutoFocus={(event) => event.preventDefault()}
>

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();
    }
  }}
>
<RadixPopover.Content
  onInteractOutside={(event) => {
    const isCombobox = comboboxElement === event.target;
    const inListbox = listboxElement?.contains(event.target);
    if (isCombobox || inListbox) {
      event.preventDefault();
    }
  }}
>