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

Your favorite food

Edit withVite Next.js

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

export default function Example() {
  const [searchValue, setSearchValue] = useState("");
  const matches = useMemo(() => matchSorter(list, searchValue), [searchValue]);
  return (
    <div className="wrapper">
      <Ariakit.ComboboxProvider
        setValue={(value) => {
          startTransition(() => setSearchValue(value));
        }}
      >
        <label className="label">
          Your favorite food
          <Ariakit.Combobox placeholder="e.g., Apple" className="combobox" />
        </label>
        <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>
    </div>
  );
}

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

export default function Example() {
  const [searchValue, setSearchValue] = useState("");
  const matches = useMemo(() => matchSorter(list, searchValue), [searchValue]);
  return (
    <div className="wrapper">
      <Ariakit.ComboboxProvider
        setValue={(value) => {
          startTransition(() => setSearchValue(value));
        }}
      >
        <label className="label">
          Your favorite food
          <Ariakit.Combobox placeholder="e.g., Apple" className="combobox" />
        </label>
        <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>
    </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

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

Related examples

Combobox with integrated filterFiltering options in a Combobox component through an abstracted implementation using React.useDeferredValue, resulting in a simple higher-level API.

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

ComboboxCancelReseting the value of a Combobox with a button rendered next to it using the ComboboxCancel component.

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.

Multi-selectable ComboboxCombining Combobox and Select to create an accessible multi-selectable search input in React.

View all examples

Follow updates

Join 1,000+ subscribers and receive monthly updates with the latest improvements on Examples.

Read latest issue

Combobox filtering

Components

Setting the search value

Filtering items

Related examples

Follow updates