@reach/combobox

Accessible combobox (autocomplete or autosuggest) component for React.

A combobox is the combination of an <input type="text" /> and a list. The list is designed to help the user arrive at a value, but the value does not necessarily have to come from that list. Don't think of it like a <select />, but more of an <input type="text" /> with some suggestions. You can, however, validate that the value comes from the list, that's up to your app.

import {
  Combobox,
  ComboboxInput,
  ComboboxPopover,
  ComboboxList,
  ComboboxOption,
  ComboboxOptionText,
} from "@reach/combobox";
import "@reach/combobox/styles.css";

function Example() {
  return (
    <div>
      <Combobox>
        <ComboboxInput aria-labelledby="demo" />
        <ComboboxPopover>
          <ComboboxList aria-labelledby="demo">
            <ComboboxOption value="Apple" />
            <ComboboxOption value="Banana" />
            <ComboboxOption value="Orange" />
            <ComboboxOption value="Pineapple" />
            <ComboboxOption value="Kiwi" />
          </ComboboxList>
        </ComboboxPopover>
      </Combobox>
    </div>
  );
}

Current Tags

0.10.3 ... latest (5 years ago)
0.4.0-beta.0 ... next (6 years ago)

4 Versions

0.17.0 ... 3 years ago
0.8.6 ... 5 years ago
0.4.0-beta.0 ... 6 years ago
0.10.3 ... 5 years ago