downshift
React hooks and a render-prop component for building accessible autocomplete, combobox and select dropdowns.
- Stars
- 12.3k
- Forks
- 933
- Licence
- MIT
- Language
- JavaScript
- Last update
- 4 months ago
- Type
- Library
What it is
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.
- Add an autocomplete search box that filters a list of items as the user types
- Build a custom select dropdown with keyboard navigation
- Create a tag input where users add and remove tags with a tag group
Great for
- 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
Not ideal for
- 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
How to get it
- 1
Install with a package manager
You'll need: Node.js · React or Preact
Install the package with npm
npm install --save downshift - 2
Run it
- Install the package and make sure react is also installed
- Copy the Usage example into a React component
- Render it in your app and type to see the filtered list and selection alert
- Read the docs at downshift-js.com to switch to useSelect or useCombobox for new work
- 3
Get the most out of it
- Use the useCombobox hook for autocomplete inputs, as the README recommends
- Use useTagGroup for multiple selection with tags
- Use the preact build from downshift/preact if you are on Preact
- Browse the docsite for full examples of the hooks and component
Downloads
Strengths
- 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
Trade-offs
- 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
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| downshift (this) | 12.3k | Library | intermediate | 4 months ago | React developers building a custom autocomplete or search-as-you-type input |
| react-select | 28k | Library | beginner | 4 months ago | React developers who need a searchable or multi-select dropdown |
| headlessui | 28.8k | Library | intermediate | 7 months ago | React or Vue developers building custom-designed interfaces |
| chakra-ui | 40.7k | Library | intermediate | 4 days ago | React developers who want prebuilt UI components instead of styling from scratch |
| sweetalert2 | 18.1k | Library | beginner | 9 days ago | Web developers who want nicer popups than the browser's built-in alert and confirm boxes |
| bootstrap-vue | 14.4k | Library | intermediate | 7 months ago | Developers maintaining an existing Vue 2 app that already uses BootstrapVue |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.