Multi-selectable Combobox

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

Combobox Concurrent React Search Dropdowns Form controls Abstracted examples

Your favorite food

1234567891011121314151617181920212223242526272829303132333435
import "./style.css";
import { useDeferredValue, useMemo, useState } from "react";
import { matchSorter } from "match-sorter";
import { Combobox, ComboboxItem } from "./combobox-multiple.jsx";
import list from "./list.js";

export default function Example() {
  const [value, setValue] = useState("");
  const [values, setValues] = useState<string[]>(["Bacon"]);
  const deferredValue = useDeferredValue(value);

  const matches = useMemo(
    () => matchSorter(list, deferredValue),
    [deferredValue],
  );

  return (
    <div className="wrapper">
      <Combobox
        label="Your favorite food"
        placeholder="e.g., Apple, Burger"
        value={value}
        onChange={setValue}
        values={values}
        onValuesChange={setValues}
      >
        {matches.map((value, i) => (
          <ComboboxItem key={value + i} value={value} />
        ))}
        {!matches.length && <div className="no-results">No results found</div>}
      </Combobox>
    </div>
  );
}

import "./style.css";
import { useDeferredValue, useMemo, useState } from "react";
import { matchSorter } from "match-sorter";
import { Combobox, ComboboxItem } from "./combobox-multiple.jsx";
import list from "./list.js";

export default function Example() {
  const [value, setValue] = useState("");
  const [values, setValues] = useState<string[]>(["Bacon"]);
  const deferredValue = useDeferredValue(value);

  const matches = useMemo(
    () => matchSorter(list, deferredValue),
    [deferredValue],
  );

  return (
    <div className="wrapper">
      <Combobox
        label="Your favorite food"
        placeholder="e.g., Apple, Burger"
        value={value}
        onChange={setValue}
        values={values}
        onValuesChange={setValues}
      >
        {matches.map((value, i) => (
          <ComboboxItem key={value + i} value={value} />
        ))}
        {!matches.length && <div className="no-results">No results found</div>}
      </Combobox>
    </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.

SelectSelect a value from a list of options presented in a dropdown menu, similar to the native HTML select element. This component is based on the WAI-ARIA Combobox Pattern.

View all components

Composition

In this example, we're combining both Combobox and Select by using the render prop. This is because SelectList and SelectItem can manage multi-selection behavior:

<ComboboxPopover render={<SelectList />} />
<SelectItem render={<ComboboxItem />}>
<ComboboxPopover render={<SelectList />} />
<SelectItem render={<ComboboxItem />}>

For more information about this pattern, refer to the Composition guide.

Related examples

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

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

ComboboxGroupOrganizing Combobox items into labelled groups using the ComboboxGroup and ComboboxGroupLabel components 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.

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.

View all examples

Follow updates

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

Read latest issue