Downshift
Edit page
HomeThe problemThis solution
Components
Hooks
Tests

Downshift 🏎

downshift logo

Primitives to build simple, flexible, WAI-ARIA compliant React autocomplete/combobox or select dropdown components.

The problem

You need an autocomplete/combobox or select experience in your application and you want it to be accessible. You also want it to be simple and flexible to account for your use cases.

This solution

This library provides its users two main sets of solutions: the Downshift component and a set of hooks. The component is still the main part of the library, providing autocomplete/combobox accessibility logic as a render prop. The hooks are newer and are going to be the way forward make widgets accessible. Right now we support useSelect for custom select components and useCombobox for combobox/autocomplete inputs. We also offer useMultipleSelection to complement the first two hooks and easily cover the experience of a multiple selection.

Since both useCombobox and the Downshift component aim to provide accessibility to a combobox/autocomplete input, we suggest using the new useCombobox first. If Downshift still covers your use case better then use the component instead. Make sure to create an issue on Github about your use case not being covered by the hook, since we may want that functionality in useCombobox as well. Both the component and the hooks are actively maintained but we are cool kids from the future and prefer to share React logic via hooks.

Components

  • Downshift

Hooks