Radix Select with Combobox

Rendering a searchable Radix UI⁠ Select component with a text field that enables typeahead & autocomplete features using the primitive Ariakit Combobox components.

Combobox Dropdowns Form controls Radix UI

Edit example

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
import {
  Combobox,
  ComboboxItem,
  ComboboxList,
  ComboboxProvider,
} from "@ariakit/react";
import * as RadixSelect from "@radix-ui/react-select";
import { matchSorter } from "match-sorter";
import {
  startTransition,
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from "react";
import { CheckIcon, ChevronUpDownIcon, SearchIcon } from "./icons.tsx";
import { languages } from "./languages.ts";
import "./style.css";

function useRadixSelectOpenState() {
  const [open, setOpen] = useState(false);
  const isWindowResizingRef = useRef(false);

  useEffect(() => {
    let resetTimer = 0;
    const onResize = () => {
      isWindowResizingRef.current = true;
      // Browsers may run microtasks between event listeners, so clear the
      // marker in the next task, after Radix handles this event.
      window.clearTimeout(resetTimer);
      resetTimer = window.setTimeout(() => {
        isWindowResizingRef.current = false;
      }, 0);
    };
    // Mark the resize before Radix handles it, but let the event reach Floating
    // UI so the popover can reposition.
    window.addEventListener("resize", onResize, true);
    return () => {
      window.removeEventListener("resize", onResize, true);
      window.clearTimeout(resetTimer);
    };
  }, []);

  const onOpenChange = useCallback((nextOpen: boolean) => {
    if (!nextOpen && isWindowResizingRef.current) return;
    setOpen(nextOpen);
  }, []);

  return { open, setOpen, onOpenChange };
}

export default function Example() {
  const { open, setOpen, onOpenChange } = useRadixSelectOpenState();
  const [value, setValue] = useState("");
  const [searchValue, setSearchValue] = useState("");

  const matches = useMemo(() => {
    if (!searchValue) return languages;
    const keys = ["label", "value"];
    const matches = matchSorter(languages, searchValue, { keys });
    // Radix Select does not work if we don't render the selected item, so we
    // make sure to include it in the list of matches.
    const selectedLanguage = languages.find((lang) => lang.value === value);
    if (selectedLanguage && !matches.includes(selectedLanguage)) {
      matches.push(selectedLanguage);
    }
    return matches;
  }, [searchValue, value]);

  return (
    <RadixSelect.Root
      value={value}
      onValueChange={setValue}
      open={open}
      onOpenChange={onOpenChange}
    >
      <ComboboxProvider
        open={open}
        setOpen={setOpen}
        resetValueOnHide
        compositeElementInFocusOrder={false}
        setValue={(value) => {
          startTransition(() => {
            setSearchValue(value);
          });
        }}
      >
        <RadixSelect.Trigger aria-label="Language" className="select">
          <RadixSelect.Value placeholder="Select a language" />
          <RadixSelect.Icon className="select-icon">
            <ChevronUpDownIcon />
          </RadixSelect.Icon>
        </RadixSelect.Trigger>
        <RadixSelect.Content
          role="dialog"
          aria-label="Languages"
          position="popper"
          className="popover"
          sideOffset={4}
          alignOffset={-16}
        >
          <div className="combobox-wrapper">
            <div className="combobox-icon">
              <SearchIcon />
            </div>
            <Combobox
              autoSelect
              placeholder="Search languages"
              className="combobox"
              // Radix infers outside focus from captured focus/blur order.
              // Ariakit's virtual blur can arrive after focus and close the
              // Select, and SelectContent has no outside-interaction escape
              // hatch, so disable virtual blur here.
              // https://github.com/ariakit/ariakit/pull/3269
              onBlurCapture={(event) => {
                event.preventDefault();
                event.stopPropagation();
              }}
            />
          </div>
          <ComboboxList className="listbox">
            {matches.map(({ label, value }) => (
              <RadixSelect.Item
                key={value}
                value={value}
                asChild
                className="item"
              >
                <ComboboxItem>
                  <RadixSelect.ItemText>{label}</RadixSelect.ItemText>
                  <RadixSelect.ItemIndicator className="item-indicator">
                    <CheckIcon />
                  </RadixSelect.ItemIndicator>
                </ComboboxItem>
              </RadixSelect.Item>
            ))}
          </ComboboxList>
        </RadixSelect.Content>
      </ComboboxProvider>
    </RadixSelect.Root>
  );
}

import {
  Combobox,
  ComboboxItem,
  ComboboxList,
  ComboboxProvider,
} from "@ariakit/react";
import * as RadixSelect from "@radix-ui/react-select";
import { matchSorter } from "match-sorter";
import {
  startTransition,
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from "react";
import { CheckIcon, ChevronUpDownIcon, SearchIcon } from "./icons.tsx";
import { languages } from "./languages.ts";
import "./style.css";

function useRadixSelectOpenState() {
  const [open, setOpen] = useState(false);
  const isWindowResizingRef = useRef(false);

  useEffect(() => {
    let resetTimer = 0;
    const onResize = () => {
      isWindowResizingRef.current = true;
      // Browsers may run microtasks between event listeners, so clear the
      // marker in the next task, after Radix handles this event.
      window.clearTimeout(resetTimer);
      resetTimer = window.setTimeout(() => {
        isWindowResizingRef.current = false;
      }, 0);
    };
    // Mark the resize before Radix handles it, but let the event reach Floating
    // UI so the popover can reposition.
    window.addEventListener("resize", onResize, true);
    return () => {
      window.removeEventListener("resize", onResize, true);
      window.clearTimeout(resetTimer);
    };
  }, []);

  const onOpenChange = useCallback((nextOpen: boolean) => {
    if (!nextOpen && isWindowResizingRef.current) return;
    setOpen(nextOpen);
  }, []);

  return { open, setOpen, onOpenChange };
}

export default function Example() {
  const { open, setOpen, onOpenChange } = useRadixSelectOpenState();
  const [value, setValue] = useState("");
  const [searchValue, setSearchValue] = useState("");

  const matches = useMemo(() => {
    if (!searchValue) return languages;
    const keys = ["label", "value"];
    const matches = matchSorter(languages, searchValue, { keys });
    // Radix Select does not work if we don't render the selected item, so we
    // make sure to include it in the list of matches.
    const selectedLanguage = languages.find((lang) => lang.value === value);
    if (selectedLanguage && !matches.includes(selectedLanguage)) {
      matches.push(selectedLanguage);
    }
    return matches;
  }, [searchValue, value]);

  return (
    <RadixSelect.Root
      value={value}
      onValueChange={setValue}
      open={open}
      onOpenChange={onOpenChange}
    >
      <ComboboxProvider
        open={open}
        setOpen={setOpen}
        resetValueOnHide
        compositeElementInFocusOrder={false}
        setValue={(value) => {
          startTransition(() => {
            setSearchValue(value);
          });
        }}
      >
        <RadixSelect.Trigger aria-label="Language" className="select">
          <RadixSelect.Value placeholder="Select a language" />
          <RadixSelect.Icon className="select-icon">
            <ChevronUpDownIcon />
          </RadixSelect.Icon>
        </RadixSelect.Trigger>
        <RadixSelect.Content
          role="dialog"
          aria-label="Languages"
          position="popper"
          className="popover"
          sideOffset={4}
          alignOffset={-16}
        >
          <div className="combobox-wrapper">
            <div className="combobox-icon">
              <SearchIcon />
            </div>
            <Combobox
              autoSelect
              placeholder="Search languages"
              className="combobox"
              // Radix infers outside focus from captured focus/blur order.
              // Ariakit's virtual blur can arrive after focus and close the
              // Select, and SelectContent has no outside-interaction escape
              // hatch, so disable virtual blur here.
              // https://github.com/ariakit/ariakit/pull/3269
              onBlurCapture={(event) => {
                event.preventDefault();
                event.stopPropagation();
              }}
            />
          </div>
          <ComboboxList className="listbox">
            {matches.map(({ label, value }) => (
              <RadixSelect.Item
                key={value}
                value={value}
                asChild
                className="item"
              >
                <ComboboxItem>
                  <RadixSelect.ItemText>{label}</RadixSelect.ItemText>
                  <RadixSelect.ItemIndicator className="item-indicator">
                    <CheckIcon />
                  </RadixSelect.ItemIndicator>
                </ComboboxItem>
              </RadixSelect.Item>
            ))}
          </ComboboxList>
        </RadixSelect.Content>
      </ComboboxProvider>
    </RadixSelect.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

<RadixSelect.Root>
  <ComboboxProvider>
    <RadixSelect.Trigger />
    <RadixSelect.Content>
      <Combobox />
      <ComboboxList>
        <RadixSelect.Item asChild>
          <ComboboxItem />
        </RadixSelect.Item>
      </ComboboxList>
    </RadixSelect.Content>
  </ComboboxProvider>
</RadixSelect.Root>
<RadixSelect.Root>
  <ComboboxProvider>
    <RadixSelect.Trigger />
    <RadixSelect.Content>
      <Combobox />
      <ComboboxList>
        <RadixSelect.Item asChild>
          <ComboboxItem />
        </RadixSelect.Item>
      </ComboboxList>
    </RadixSelect.Content>
  </ComboboxProvider>
</RadixSelect.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, onOpenChange } = useRadixSelectOpenState();

<RadixSelect.Root open={open} onOpenChange={onOpenChange}>
  <ComboboxProvider open={open} setOpen={setOpen}>
const { open, setOpen, onOpenChange } = useRadixSelectOpenState();

<RadixSelect.Root open={open} onOpenChange={onOpenChange}>
  <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.

Keeping the Select open when the viewport resizes

Radix Select closes its popup when the window resizes. On mobile browsers, showing the on-screen keyboard may resize the window and immediately close the popup. Since this example uses Radix's position="popper" mode, its Floating UI positioning already reacts to viewport changes. We can keep this controlled Select open while the resize event is being handled and let the popup reposition instead:

function useRadixSelectOpenState() {
  const [open, setOpen] = useState(false);
  const isWindowResizingRef = useRef(false);

  useEffect(() => {
    let resetTimer = 0;
    const onResize = () => {
      isWindowResizingRef.current = true;
      window.clearTimeout(resetTimer);
      resetTimer = window.setTimeout(() => {
        isWindowResizingRef.current = false;
      }, 0);
    };
    window.addEventListener("resize", onResize, true);
    return () => {
      window.removeEventListener("resize", onResize, true);
      window.clearTimeout(resetTimer);
    };
  }, []);

  const onOpenChange = useCallback((nextOpen) => {
    if (!nextOpen && isWindowResizingRef.current) return;
    setOpen(nextOpen);
  }, []);

  return { open, setOpen, onOpenChange };
}
function useRadixSelectOpenState() {
  const [open, setOpen] = useState(false);
  const isWindowResizingRef = useRef(false);

  useEffect(() => {
    let resetTimer = 0;
    const onResize = () => {
      isWindowResizingRef.current = true;
      window.clearTimeout(resetTimer);
      resetTimer = window.setTimeout(() => {
        isWindowResizingRef.current = false;
      }, 0);
    };
    window.addEventListener("resize", onResize, true);
    return () => {
      window.removeEventListener("resize", onResize, true);
      window.clearTimeout(resetTimer);
    };
  }, []);

  const onOpenChange = useCallback((nextOpen) => {
    if (!nextOpen && isWindowResizingRef.current) return;
    setOpen(nextOpen);
  }, []);

  return { open, setOpen, onOpenChange };
}

The capture listener marks the current resize before Radix handles it without stopping propagation, so Floating UI and other resize listeners still run. The timer clears the marker in the next task because browsers may run microtasks between event listeners.

This intentionally keeps the popup open for every window resize, including virtual keyboards, orientation changes, and ordinary resizing. Browsers don't expose a reliable way to distinguish those causes.

Filtering options

The Ariakit Combobox component doesn't dictate how you filter the items. It focuses solely on the ComboboxItem elements you render. Consequently, you can render items conditionally based on the value state.

We use the setValue callback in combination with React.startTransition⁠ to update our search value state without blocking the UI:

const [searchValue, setSearchValue] = useState("");

<ComboboxProvider
  setValue={(value) => {
    React.startTransition(() => {
      setSearchValue(value);
    });
  }}
>
const [searchValue, setSearchValue] = useState("");

<ComboboxProvider
  setValue={(value) => {
    React.startTransition(() => {
      setSearchValue(value);
    });
  }}
>

You're free to use any matching algorithm or library to filter the items. In this example, we use match-sorter⁠:

const matches = useMemo(() => {
  return matchSorter(languages, searchValue, {
    keys: ["label", "value"],
  });
}, [languages, searchValue]);
const matches = useMemo(() => {
  return matchSorter(languages, searchValue, {
    keys: ["label", "value"],
  });
}, [languages, searchValue]);

Rendering `SelectItem` as `ComboboxItem`

To get the items to function as both a Radix SelectItem and an Ariakit ComboboxItem, we have to combine the two components:

<RadixSelect.Item value="en" asChild>
  <ComboboxItem>
    <RadixSelect.ItemText>English</RadixSelect.ItemText>
  </ComboboxItem>
</RadixSelect.Item>
<RadixSelect.Item value="en" asChild>
  <ComboboxItem>
    <RadixSelect.ItemText>English</RadixSelect.ItemText>
  </ComboboxItem>
</RadixSelect.Item>