Downshift 🏎

Primitives to build simple, flexible,WAI-ARIA compliant Reactautocomplete/combobox orselect dropdown components.

The problem​

You need anautocomplete/combobox or aselect experience in your applicationand you want it to be accessible. You also want it to be simple and flexible toaccount for your use cases. Finally, it should follow the ARIA design patternfor acombobox or aselect, depending on youruse case.

This solution​

The library offers a couple of solutions. The first solution, which is the onewe recommend you to try first, is a set of React hooks. Each hook provides thestateful logic needed to make the corresponding component functional andaccessible. Navigate to the documentation for each by using the links in thelist below.

• useSelect for a custom select component.
• useCombobox for a combobox/autocomplete input.
• useMultipleSelection for selecting multiple itemsin a select or a combobox, as well as deleting items from selection ornavigating between the selected items.

The second solution is theDownshift component, which can also beused to create accessible combobox and select components, providing the logic inthe form of a render prop. It served as inspiration for developing the hooks andit has been around for a while. It established a successful pattern for makingcomponents accessible and functional while giving developers complete freedomwhen building the UI.