@reach/listbox

@reach/listbox

Docs | Source | WAI-ARIA

An accessible listbox for custom select inputs.

import * as React from "react";
import { Listbox, ListboxOption } from "@reach/listbox";
import "@reach/listbox/styles.css";

function Example(props) {
  let [value, setValue] = React.useState("default");
  return (
    <Listbox value={value} onChange={(value) => setValue(value)}>
      <ListboxOption value="default">🌮 Choose a taco</ListboxOption>
      <hr />
      <ListboxOption value="asada" valueText="Carne Asada">
        🌮 Carne Asada
      </ListboxOption>
      <ListboxOption value="pollo" valueText="Pollo">
        🌮 Pollo
      </ListboxOption>
      <ListboxOption value="pastor" valueText="Pastor">
        🌮 Pastor
      </ListboxOption>
      <ListboxOption value="lengua" valueText="Lengua">
        🌮 Lengua
      </ListboxOption>
    </Listbox>
  );
}