Single Select Demo | react-searchable-dropdown

Single Select

Default theme, string options, zero debounce. The list contains hundreds of thousands of cities. Start typing to see the search filter in action.

154,694 cities loaded

No selection

The code

SingleSelectExample.tsx

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

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

function CityPicker() {
  const [value, setValue] = useState<string | undefined>(undefined);

  return (
    <SearchableDropdown
      options={cities}
      value={value}
      setValue={setValue}
      placeholder="Search cities..."
      dropdownOptionsHeight={320}
      debounceDelay={100}
    />
  );
}