koolcodez / react-searchable-dropdown logo
esc

Type to search...

The choice

react-select is the default answer when you need a dropdown in React. It's feature rich, battle tested on thousands of apps, and covers single select, multi select, async, creatable, grouping, and custom rendering in one API. Pick it if you need every one of those switches on day one.

react-searchable-dropdown is smaller on purpose. It ships virtualization, fuzzy search, and accessibility as defaults rather than as plugins, and its TypeScript generics carry your option type through every prop without ceremony. You trade the kitchen sink for a sharper, narrower surface.

Where each one sits

Dropdowns that do more than this lock you into their styling system (emotion, CSS in JS) and a props surface that has to cover every edge case for every app. Dropdowns that do less hand you a headless combobox and leave virtualization, fuzzy search, and portal positioning on your plate.

react-select is the maximalist in that spectrum: everything bundled, everything configurable, runtime styling baked in. react-searchable-dropdown sits in the middle: batteries included for the common cases, className hooks and CSS variables when you need to deviate, no style engine at runtime.

Feature by feature

Feature comparison between react-searchable-dropdown and react-select

@luciodale/react-searchable-dropdown Virtualized, typed, fuzzy first
Virtualized option list
Yes
Fuzzy search built in
Yes
Async search
Yes
Creatable options
createNewOptionIfNoMatch
Single and multi select
Yes
Grouped options
Yes
Animated chips and transitions
No
Plugin ecosystem
Minimal
Production track record
Young, narrower scope
TypeScript generics end to end
Yes
Accessibility
Yes
Styling model
className slots + CSS variables
Runtime style engine
No
Portal positioning
Yes
Runtime dependencies
4 (virtuoso, floating-ui, match-sorter, autosuggest-highlight)
Bundle size (min+gzip)
~15 kB
react-select Full featured, plugin heavy
Virtualized option list
Via react-windowed-select plugin
Fuzzy search built in
No
Async search
Separate AsyncSelect
Creatable options
CreatableSelect variant
Single and multi select
Yes
Grouped options
Yes
Animated chips and transitions
Yes
Plugin ecosystem
Large
Production track record
10+ years, millions of apps
TypeScript generics end to end
Props<Option, IsMulti, Group>
Accessibility
Yes
Styling model
Emotion runtime (styles prop)
Runtime style engine
@emotion/react
Portal positioning
Yes
Runtime dependencies
react-select + emotion stack
Bundle size (min+gzip)
~25 to 45 kB

TypeScript that doesn't fight you

react-select types are powerful but noisy: Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>>. You'll end up importing SingleValue, MultiValue, ActionMeta just to type an onChange.

dropdown.tsx 
// react-searchable-dropdown: pass your type, done
type User = { label: string; value: string; department: string };

<SearchableDropdown<User>
  options={users}
  value={user}
  setValue={setUser}
  searchOptionKeys={["label", "department"]}
/>

Rename department in the User type and the compiler flags searchOptionKeys the same second. No type aliases to import, no conditional Props generic juggling.

Virtualization by default

react-select renders every option in the DOM unless you wrap it with react-windowed-select plus react-window. That's two extra libraries and a custom MenuList component for the baseline "show me 5000 options" case. react-searchable-dropdown ships virtuoso out of the box, so 100k options feels the same as 100.

When to pick react-select

When to pick react-searchable-dropdown

Next steps