Downshift — Accessible Autocomplete and Select Primitives for React

Introduction

Downshift gives you the logic and accessibility primitives for comboboxes, selects, and autocomplete inputs without imposing any markup or styling. You bring the UI, and Downshift handles keyboard navigation, ARIA roles, open/close state, and item highlighting according to WAI-ARIA best practices.

What Downshift Does

• Provides useCombobox, useSelect, and useMultipleSelection hooks
• Manages open/close state, highlighted index, and selected items internally
• Applies correct ARIA roles, labels, and keyboard interactions automatically
• Supports controlled and uncontrolled usage patterns
• Works with any rendering approach — no opinions on DOM structure or styling

Architecture Overview

Downshift uses a reducer-based state machine internally. Each hook tracks the input value, highlighted index, selected item, and menu visibility. Prop getters (getInputProps, getMenuProps, getItemProps) return the ARIA attributes and event handlers that need to be spread onto your elements. This inversion-of-control pattern keeps the logic reusable while giving full rendering freedom.

Self-Hosting & Configuration

• Install from npm with no peer dependencies beyond React
• Choose the appropriate hook: useCombobox for text input with suggestions, useSelect for dropdown menus
• Pass an items array and optional onSelectedItemChange callback
• Customize state changes via stateReducer for advanced behavior
• Combine with useMultipleSelection to build multi-select tag inputs

Key Features

• WAI-ARIA compliant keyboard navigation and screen-reader support out of the box
• Prop getter pattern for zero-opinion rendering
• State reducer for overriding any internal state transition
• Virtual scrolling compatible — works with react-window and react-virtualized
• Small bundle size with no external dependencies

Comparison with Similar Tools

• React Select — full-featured styled select component; Downshift is headless and unstyled
• Radix UI Select — accessible primitives with minimal styling; Downshift offers deeper control over state transitions
• Headless UI Combobox — Tailwind Labs headless primitives; Downshift is framework-agnostic within React
• Ariakit — comprehensive ARIA toolkit; Downshift focuses specifically on select and combobox patterns

FAQ

Q: Why use Downshift instead of a styled select library? A: When you need full control over the look and behavior of autocomplete or select inputs while maintaining accessibility.

Q: Can I use it with server-side filtering? A: Yes. You control the items array, so you can fetch filtered results from an API based on the input value and pass them in.

Q: Does it work with React Native? A: The hooks manage state and props without assuming a DOM environment, but the prop getters target HTML attributes. Community adapters exist for React Native.

Q: Is it maintained? A: Yes. Downshift is part of the Downshift.js organization and continues to receive updates.

Sources

• https://github.com/downshift-js/downshift
• https://downshift-js.com