A set of hooks to build simple, flexible, WAI-ARIA compliant React dropdown components. Developed as a follow up on this issue about using hooks in our API.
useSelect and useCombobox received some changes related to their API and how
they works in version 7, as a conequence of adapting both hooks to the ARIA 1.2
combobox patterns. If you were using useSelect and/or useCombobox previous
to 7.0.0, check the migration guide and update if necessary.
Check out one of the hooks below to use in your application and create fully accessible widgets without any constraint about the UI library used.
For a custom select dropdown check out useSelect.
For a combobox/autocomplete input check out useCombobox.
For a multiple selection with either a select or a combobox check out
useMultipleSelection.
Silviu delivered a talk about using the Downshift hooks at the axe-con 2021 conference. The talk, which is also recorded, illustrates how to build an accessible select, combobox, and support multiple selection using Downshift hooks and custom components from ChakraUI. It offers a brief crash course to:
- build a custom Select.
- build a custom Combobox.
- enhance the Select and Combobox with multiple selection.
- use custom features like control props, the state reducer and action props.
Next steps:
- iterate on
useSelect,useCombobox,useMultipleSelectionto improve them. - remove the
Downshiftcomponent once the hooks are mature.