Searchable

Type to filter options instantly. Supports custom filter functions for searching across multiple fields.

Type-to-Filter

10,000 cities · Search by name, country, or timezone

Enable search with a single prop:

const select = useVirtualSelect({
  options: cities,
  getOptionValue: (c) => c.id,
  getOptionLabel: (c) => c.name,
  searchable: true,
});

Use a custom filter to search across multiple fields:

useVirtualSelect({
  searchable: true,
  filterOption: (option, input) =>
    option.name.toLowerCase().includes(input.toLowerCase()) ||
    option.country.toLowerCase().includes(input.toLowerCase()) ||
    option.timezone.toLowerCase().includes(input.toLowerCase()),
});

Control the search value externally:

const [search, setSearch] = useState('');
useVirtualSelect({
  searchable: true,
  searchValue: search,
  onSearchChange: setSearch,
});

Options

Option	Type	Default
`searchable`	`boolean`	`false`
`searchValue`	`string`	—
`onSearchChange`	`(value: string) => void`	—
`filterOption`	`(option: T, input: string) => boolean`	label includes input
`clearSearchOnSelect`	`boolean`	`true`