# Downshift — Accessible Autocomplete and Select Primitives for React

> A set of hooks and components for building accessible combobox, select, and autocomplete experiences. Handles keyboard navigation, ARIA attributes, and state management while you control the rendering.

## Install

Save as a script file and run:

# Downshift — Accessible Autocomplete and Select Primitives for React

## Quick Use
```bash
npm install downshift
```
```jsx
import { useCombobox } from "downshift";

const items = ["React", "Vue", "Svelte", "Angular"];

function Autocomplete() {
  const { isOpen, getInputProps, getMenuProps, getItemProps, highlightedIndex } =
    useCombobox({ items });
  return (
    <div>
      <input {...getInputProps()} placeholder="Pick a framework" />
      <ul {...getMenuProps()}>
        {isOpen && items.map((item, i) => (
          <li key={item} {...getItemProps({ item, index: i })}
            style={{ background: highlightedIndex === i ? "#eee" : "white" }}>
            {item}
          </li>
        ))}
      </ul>
    </div>
  );
}
```

## 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

---
Source: https://tokrepo.com/en/workflows/76d46e46-4517-11f1-9bc6-00163e2b0d79
Author: Script Depot