Combobox filtering

Listing suggestions in a Combobox component based on the input value using React.startTransition⁠ to ensure the UI remains responsive during typing.

Combobox Concurrent React Search Dropdowns Form controls

Edit example

123456789101112131415161718192021222324252627282930313233343536
import * as Ariakit from "@ariakit/react";
import { matchSorter } from "match-sorter";
import { startTransition, useMemo, useState } from "react";
import list from "./list.ts";
import "./style.css";

export default function Example() {
  const [searchValue, setSearchValue] = useState("");
  const matches = useMemo(() => matchSorter(list, searchValue), [searchValue]);
  return (
    <Ariakit.ComboboxProvider
      setValue={(value) => {
        startTransition(() => setSearchValue(value));
      }}
    >
      <Ariakit.ComboboxLabel className="label">
        Your favorite food
      </Ariakit.ComboboxLabel>
      <Ariakit.Combobox placeholder="e.g., Apple" className="combobox" />
      <Ariakit.ComboboxPopover gutter={8} sameWidth className="popover">
        {matches.length ? (
          matches.map((value) => (
            <Ariakit.ComboboxItem
              key={value}
              value={value}
              className="combobox-item"
            />
          ))
        ) : (
          <div className="no-results">No results found</div>
        )}
      </Ariakit.ComboboxPopover>
    </Ariakit.ComboboxProvider>
  );
}

import * as Ariakit from "@ariakit/react";
import { matchSorter } from "match-sorter";
import { startTransition, useMemo, useState } from "react";
import list from "./list.ts";
import "./style.css";

export default function Example() {
  const [searchValue, setSearchValue] = useState("");
  const matches = useMemo(() => matchSorter(list, searchValue), [searchValue]);
  return (
    <Ariakit.ComboboxProvider
      setValue={(value) => {
        startTransition(() => setSearchValue(value));
      }}
    >
      <Ariakit.ComboboxLabel className="label">
        Your favorite food
      </Ariakit.ComboboxLabel>
      <Ariakit.Combobox placeholder="e.g., Apple" className="combobox" />
      <Ariakit.ComboboxPopover gutter={8} sameWidth className="popover">
        {matches.length ? (
          matches.map((value) => (
            <Ariakit.ComboboxItem
              key={value}
              value={value}
              className="combobox-item"
            />
          ))
        ) : (
          <div className="no-results">No results found</div>
        )}
      </Ariakit.ComboboxPopover>
    </Ariakit.ComboboxProvider>
  );
}

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

In this example, we're using the setValue prop from the ComboboxProvider component to set the search value when the user types. The state is updated in a React.startTransition⁠ callback to ensure the UI remains responsive during typing.

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

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

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

You can learn more about controlling state on the Component providers guide.

Filtering items

The Combobox component is agnostic to the filtering method you use. Its concern lies solely in the items you render through the ComboboxItem component. You have the flexibility to select the filtering strategy that suits your specific use case.

In this example, we use the match-sorter⁠ library to filter and sort items based on the search value. Another option is fast-fuzzy⁠, which employs advanced algorithms for fuzzy search.

const matches = useMemo(() => {
  return matchSorter(list, searchValue);
}, [searchValue]);

matches.map((value) => <ComboboxItem key={value} value={value} />);
const matches = useMemo(() => {
  return matchSorter(list, searchValue);
}, [searchValue]);

matches.map((value) => <ComboboxItem key={value} value={value} />);