downshift
🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.
A React library that handles all the keyboard navigation, accessibility attributes, and interaction logic for dropdowns, autocomplete inputs, and comboboxes, with no built-in visuals, so you design the UI yourself.
Downshift is a React library for building dropdown components, autocomplete inputs, and combobox widgets that work correctly for people using screen readers and keyboard navigation. Building these components from scratch while meeting accessibility standards is difficult and repetitive, so Downshift provides the underlying logic, leaving the visual design entirely up to the developer.
The library takes a "bring your own UI" approach. Rather than rendering a specific dropdown that developers then try to customize, Downshift handles only the behavior: tracking which item is highlighted, whether the list is open, what happens when the user types or presses arrow keys, and how to announce changes to screen readers. The developer writes all the HTML and CSS for the actual dropdown, and Downshift provides a set of functions that attach the right event handlers and accessibility attributes to each element.
The library currently offers three main tools: a useCombobox hook for a text input with a suggestion list (the classic autocomplete pattern), a useSelect hook for a custom dropdown menu that replaces a standard select element, and a useTagGroup hook for managing groups of removable tags, which is useful for multiple-selection interfaces. There is also an older Downshift component that works via a render prop pattern rather than hooks. The README recommends using the hooks for new projects, noting that the older component will eventually be removed once the hooks are considered mature.
Installation is a single npm command, and the library also works with Preact. The accessibility implementation follows the W3C ARIA 1.2 combobox patterns, meaning the components behave consistently with what assistive technologies expect. The docsite at downshift-js.com has live examples, API references, and migration guides. The full README is longer than what was shown.
Where it fits
- Build a fully accessible autocomplete search input with a suggestion list that works for keyboard and screen reader users.
- Create a custom styled dropdown that replaces a plain select element while meeting ARIA accessibility standards.
- Build a multi-tag input where users type to search, select items, and remove them as chips, with full keyboard support.