downshift vs React Select
Which should you use? A side-by-side look at what each one does, who it suits, what it costs, how hard it is to set up, and where each falls short.
Open source · MIT
React hooks and a render-prop component for building accessible autocomplete, combobox and select dropdowns.
Open source · MIT
A customisable dropdown select component for React apps.
The short answer
Choose downshift if you need…
- React developers building a custom autocomplete or search-as-you-type input
- Teams that need a select or combobox that meets WAI-ARIA accessibility patterns
- Developers who want full control over how the dropdown looks
- Projects building multi-select inputs with tags, using useTagGroup
Choose React Select if you need…
- React developers who need a searchable or multi-select dropdown
- Teams building forms that need controlled or uncontrolled select state
- Projects that want to customise select styling with emotion
- Developers who need async or creatable options, which the docs cover
Side-by-side
| downshift | React Select | |
|---|---|---|
| Type | Library | Library |
| Price | Free and open source | Free and open source |
| Licence | MIT | MIT |
| GitHub stars | 12.3k | 28k |
| Setup difficulty | Intermediate | Beginner |
| How you get it | Install with a package manager | Install with a package manager |
| Main language | JavaScript | TypeScript |
| Last code update | 4 months ago | 4 months ago |
What each one is
downshift
Downshift is a JavaScript library for React that handles the behavior and state of dropdown-style inputs such as autocomplete boxes, comboboxes and select menus. You supply the markup and styling, and it supplies the keyboard handling, highlighting and accessibility attributes that follow WAI-ARIA patterns. The README recommends its hooks, useSelect, useCombobox and useTagGroup, over the older Downshift render-prop component.
React Select
React Select is a component library for React that provides a select control, the dropdown where users pick one or more options from a list. It works out of the box and can be customised in its styling, data handling, and UI parts. Developers add it to their app when they need a richer select than a plain HTML select, such as searching, multiple choices, or option groups.
Best for
downshift
- React developers building a custom autocomplete or search-as-you-type input
- Teams that need a select or combobox that meets WAI-ARIA accessibility patterns
- Developers who want full control over how the dropdown looks
- Projects building multi-select inputs with tags, using useTagGroup
React Select
- React developers who need a searchable or multi-select dropdown
- Teams building forms that need controlled or uncontrolled select state
- Projects that want to customise select styling with emotion
- Developers who need async or creatable options, which the docs cover
Strengths
downshift
- Accessibility is built in, following the ARIA combobox pattern as stated in the README
- Small API surface and flexible rendering, since you control all of the markup
- Actively maintained with a documented migration guide for version 7
React Select
- Works out of the box with a small set of common props
- Styling and components can be customised through documented APIs
- Backed by Thinkmill and Atlassian with a large community and 28k+ stars
Not ideal for
downshift
- People who want a ready-made styled component out of the box; the README says you render everything yourself
- Projects not using React or Preact, since the library is built for those frameworks
- Teams needing the older Downshift component for new work, since the README says the hooks are recommended and the component will eventually be removed
React Select
- Projects not using React, since the component is built for React.js
- Developers needing an older React Select v1 or v2 setup without checking the upgrade guides, since v5 is a TypeScript rewrite
- Users who only need a simple native HTML select with no extra features
Trade-offs
downshift
- You must write the UI yourself, which means more code than a prebuilt component
- The README is truncated here, so detailed hook options are only available in the linked docs
- Downshift is recommended as hooks, so the older component API is not the path forward
React Select
- Customisation depends on understanding its props and component injection API, which takes time to learn
- The README is brief and points to the external docs site for most detail
- Major version upgrades have required migration guides
Getting started
downshift
Install the package with npm
npm install --save downshiftReact Select
Install from npm with yarn
yarn add react-selectFrequently asked questions
What is the difference between downshift and React Select?
downshift: React hooks and a render-prop component for building accessible autocomplete, combobox and select dropdowns. React Select: A customisable dropdown select component for React apps. downshift suits react developers building a custom autocomplete or search-as-you-type input, while React Select suits react developers who need a searchable or multi-select dropdown.
Are downshift and React Select free?
downshift: Free and open source. React Select: Free and open source.
Which is easier to set up, downshift or React Select?
React Select is easier to get started with (rated beginner); downshift is rated intermediate and usually needs more setup.
Is downshift or React Select more popular?
React Select has more GitHub stars (28k) than downshift (12.3k). Popularity isn't the same as fit — check which one matches your use case above.
What are other alternatives to downshift and React Select?
Other options people compare them with include Headless UI, Chakra UI, SweetAlert2, BootstrapVue, cmdk.
Keep comparing
Built from our catalogue entries for both products: open-source details come from each project's README (AI-assisted, refreshed weekly) and GitHub data; AI-tool details are editorial. Spotted something wrong? Let us know from either product's page.