downshift-js/downshift

★ 12,297JavaScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((Downshift))
    What it does
      Accessible dropdowns
      Bring your own UI
      Logic without styles
    Hooks
      useCombobox
      useSelect
      useTagGroup
    Accessibility
      ARIA 1.2 patterns
      Keyboard navigation
      Screen reader support
    Tech stack
      JavaScript
      React and Preact

mindmap root((Downshift)) What it does Accessible dropdowns Bring your own UI Logic without styles Hooks useCombobox useSelect useTagGroup Accessibility ARIA 1.2 patterns Keyboard navigation Screen reader support Tech stack JavaScript React and Preact

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Build a fully accessible autocomplete search input with a suggestion list that works for keyboard and screen reader users.

USE CASE 2

Create a custom styled dropdown that replaces a plain select element while meeting ARIA accessibility standards.

USE CASE 3

Build a multi-tag input where users type to search, select items, and remove them as chips, with full keyboard support.

Tech stack

JavaScriptReactPreact

Getting it running

Difficulty · easy Time to first run · 30min

In plain English

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.

Copy-paste prompts

Prompt 1

Using downshift's useCombobox hook, build a React autocomplete input that filters a list of country names as the user types and lets them select one.

Prompt 2

I need a custom dropdown menu in React that keyboard users can navigate with arrow keys and that screen readers announce correctly. Show me how to use downshift's useSelect hook.

Prompt 3

Using downshift's useTagGroup hook, create a React component where users type items, press Enter to add them as tags, and click X to remove each one.

Prompt 4

How do I integrate downshift's useCombobox with a remote API? Show me how to fetch suggestions from a server as the user types, with debouncing.

Open on GitHub → Explain another repo

← downshift-js on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.