Search

Enable the search field with searchable. Client-side filtering uses the option label by default.

Client filter

<Dropdown
  data={countries}
  value={value}
  onChange={setValue}
  searchable
  searchPlaceholder="Find a country"
/>

Option taps default to keyboardShouldPersistTaps="handled" so a result can be selected while the keyboard is open. Use "always" if the first tap still only dismisses the keyboard:

<Dropdown searchable keyboardShouldPersistTaps="always" ... />

Override matching with filter:

<Dropdown
  searchable
  filter={(option, query) =>
    option.label.toLowerCase().includes(query.toLowerCase())
  }
  ...
/>

Async search

Use onSearch for remote queries. Pair with loading while the request is in flight, and update data when results arrive.

<Dropdown
  data={results}
  value={value}
  onChange={setValue}
  searchable
  loading={isFetching}
  onSearch={async (query) => {
    const next = await fetchCountries(query);
    setResults(next);
  }}
/>