Multi Select Demo | react-searchable-dropdown

Multi Select

Multi-select with 100ms debounce and backspace chip deletion enabled. Select multiple cities and watch them appear as removable chips.

154,694 cities loaded

No selection

The code

MultiSelectExample.tsx

import { SearchableDropdownMulti } from "@luciodale/react-searchable-dropdown";
import "@luciodale/react-searchable-dropdown/dist/multi-style.css";
import { useState } from "react";

const cities = ["London, GB", "Paris, FR", "Berlin, DE", /* ... */];

function CityPickerMulti() {
  const [values, setValues] = useState<string[] | undefined>(undefined);

  return (
    <SearchableDropdownMulti
      options={cities}
      values={values}
      setValues={setValues}
      placeholder="Search cities..."
      dropdownOptionsHeight={312}
      debounceDelay={100}
      deleteLastChipOnBackspace
    />
  );
}