Introduction | Downshift
Downshift 🏎. Primitives to build simple, flexible, WAI-ARIA compliant React autocomplete/combobox or select dropdown components. The problem You need an autocomplete/combobox or a 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.
useSelect - Downshift
It returns a set of props that are meant to be called, and their results destructured on the dropdown's elements: its label, toggle button, list and list items. These are similar to the props provided by vanilla Downshift to the children render prop.
useCombobox - Downshift
It returns a set of props that are meant to be called and their results destructured on the combobox's elements: its label, toggle button, input, combobox container, list and list items. The props are similar to the ones provided by the Downshift component to its children via render prop.
useMultipleSelection | Downshift
The props are similar to the ones provided by vanilla Downshift to the children render prop. These props are called getter props and their return values are destructured as a set of ARIA attributes and event listeners.
Downshift
The Downshift component has been developed in order to provide accessibility and functionality to a combobox or autocomplete input, described by its corresponding ARIA accessibility pattern. This is a component that controls user interactions and state for you so you can create autocomplete/combobox or select components.
Hooks - Downshift
Downshift Hooks. Every React hook offers custom logic to build the kind of dropdown you need. If you need to build a combobox then use useCombobox. However, if you don't need to type a search query and just have a dropdown that is actioned by a …