Primitives to build simple, flexible,
WAI-ARIA compliant React
autocomplete/combobox or select dropdown components.
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. Finally, it should follow the ARIA design pattern
for a combobox or a select, depending on your
The library offers a couple of solutions. The first solution, which is the one we recommend you to try first, is a set of React hooks. Each hook provides the stateful logic needed to make the corresponding component functional and accessible. Navigate to the documentation for each by using the links in the list below.
- useSelect for a custom select component.
- useCombobox for a combobox/autocomplete input.
- useMultipleSelection for selecting multiple items in a select or a combobox, as well as deleting items from selection or navigating between the selected items.
The second solution is the Downshift component, which can also be used to create accessible combobox and select components, providing the logic in the form of a render prop. It served as inspiration for developing the hooks and it has been around for a while. It established a successful pattern for making components accessible and functional while giving developers complete freedom when building the UI.