Search results
Downshift 🏎. Primitives to build simple, flexible, WAI-ARIA compliant React autocomplete/combobox or select dropdown components.
Downshift Introduction 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.
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 button (a select, basically), then use useSelect.
useCombobox is a React hook that manages all the stateful logic needed to make the combobox functional and accessible. 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.
As useSelect needs to perform some focus () and scroll () logic on the DOM elements, it requires refs to the React components used. This example illustrates how to use useSelect with MaterialUI, and shows how to correctly pass refs to the hook.
Props used in examples. In the examples below, we use the useMultipleSelection hook with both useSelect and useCombobox, destructure from its result the getter props and state variables. The getDropdownProps can be called with a preventKeyAction parameter.
