Combobox with integrated filter

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

Plus Combobox Concurrent React Search Dropdowns Form controls Advanced Abstracted examples

Edit example

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
import { Combobox, ComboboxEmpty, ComboboxItem } from "./combobox.tsx";

export default function Example() {
  return (
    <Combobox autoSelect placeholder="Search food">
      <ComboboxEmpty>No results found</ComboboxEmpty>
      <ComboboxItem value="Apple" />
      <ComboboxItem value="Bacon" />
      <ComboboxItem value="Banana" />
      <ComboboxItem value="Broccoli" />
      <ComboboxItem value="Burger" />
      <ComboboxItem value="Cake" />
      <ComboboxItem value="Candy" />
      <ComboboxItem value="Carrot" />
      <ComboboxItem value="Cherry" />
      <ComboboxItem value="Chicken" />
      <ComboboxItem value="Chocolate" />
      <ComboboxItem value="Cookie" />
      <ComboboxItem value="Donut" />
      <ComboboxItem value="Egg" />
      <ComboboxItem value="Fish" />
      <ComboboxItem value="Fries" />
      <ComboboxItem value="Grapes" />
      <ComboboxItem value="Ice cream" />
      <ComboboxItem value="Lemon" />
      <ComboboxItem value="Meat" />
      <ComboboxItem value="Milk" />
      <ComboboxItem value="Orange" />
      <ComboboxItem value="Pasta" />
      <ComboboxItem value="Peach" />
      <ComboboxItem value="Pineapple" />
      <ComboboxItem value="Pizza" />
      <ComboboxItem value="Rice" />
      <ComboboxItem value="Salad" />
      <ComboboxItem value="Sandwich" />
      <ComboboxItem value="Sausage" />
      <ComboboxItem value="Steak" />
      <ComboboxItem value="Strawberry" />
      <ComboboxItem value="Sushi" />
      <ComboboxItem value="Tomato" />
      <ComboboxItem value="Waffle" />
      <ComboboxItem value="Watermelon" />
      <ComboboxItem value="Yogurt" />
    </Combobox>
  );
}

import { Combobox, ComboboxEmpty, ComboboxItem } from "./combobox.tsx";

export default function Example() {
  return (
    <Combobox autoSelect placeholder="Search food">
      <ComboboxEmpty>No results found</ComboboxEmpty>
      <ComboboxItem value="Apple" />
      <ComboboxItem value="Bacon" />
      <ComboboxItem value="Banana" />
      <ComboboxItem value="Broccoli" />
      <ComboboxItem value="Burger" />
      <ComboboxItem value="Cake" />
      <ComboboxItem value="Candy" />
      <ComboboxItem value="Carrot" />
      <ComboboxItem value="Cherry" />
      <ComboboxItem value="Chicken" />
      <ComboboxItem value="Chocolate" />
      <ComboboxItem value="Cookie" />
      <ComboboxItem value="Donut" />
      <ComboboxItem value="Egg" />
      <ComboboxItem value="Fish" />
      <ComboboxItem value="Fries" />
      <ComboboxItem value="Grapes" />
      <ComboboxItem value="Ice cream" />
      <ComboboxItem value="Lemon" />
      <ComboboxItem value="Meat" />
      <ComboboxItem value="Milk" />
      <ComboboxItem value="Orange" />
      <ComboboxItem value="Pasta" />
      <ComboboxItem value="Peach" />
      <ComboboxItem value="Pineapple" />
      <ComboboxItem value="Pizza" />
      <ComboboxItem value="Rice" />
      <ComboboxItem value="Salad" />
      <ComboboxItem value="Sandwich" />
      <ComboboxItem value="Sausage" />
      <ComboboxItem value="Steak" />
      <ComboboxItem value="Strawberry" />
      <ComboboxItem value="Sushi" />
      <ComboboxItem value="Tomato" />
      <ComboboxItem value="Waffle" />
      <ComboboxItem value="Watermelon" />
      <ComboboxItem value="Yogurt" />
    </Combobox>
  );
}