Building Autocomplete UIs in React: downshift vs react-autocomplete vs react-select

When you need to add a search-as-you-type input or a dropdown selector to your React app, three packages often come up: downshift, react-autocomplete, and react-select. They all solve similar problems but with very different philosophies. Let’s break down how they work, where they shine, and what trade-offs you’ll face.

🧩 Core Philosophy: Control vs Convention

downshift gives you complete control over rendering and behavior. It’s a headless utility that manages the complex state logic (like keyboard navigation, focus, and ARIA attributes) but leaves every visual detail up to you.

// downshift: fully custom render
import { useCombobox } from 'downshift';

function CustomAutocomplete({ items }) {
  const {
    isOpen,
    getInputProps,
    getToggleButtonProps,
    getMenuProps,
    getItemProps,
    highlightedIndex
  } = useCombobox({ items });

  return (
    <div>
      <input {...getInputProps()} />
      <button {...getToggleButtonProps()}>▼</button>
      <ul {...getMenuProps()}>
        {isOpen && items.map((item, index) => (
          <li
            key={item.id}
            {...getItemProps({ item, index })}
            style={{ backgroundColor: highlightedIndex === index ? '#eee' : 'white' }}
          >
            {item.name}
          </li>
        ))}
      </ul>
    </div>
  );
}

react-autocomplete is a minimalist, unstyled component that handles basic autocomplete behavior but expects you to provide most of the rendering logic. It’s less opinionated than react-select but more prescriptive than downshift.

// react-autocomplete: render props pattern
import Autocomplete from 'react-autocomplete';

function BasicAutocomplete({ items }) {
  return (
    <Autocomplete
      items={items}
      getItemValue={(item) => item.name}
      renderItem={(item, isHighlighted) => (
        <div style={{ background: isHighlighted ? '#eee' : 'white' }}>
          {item.name}
        </div>
      )}
      inputProps={{ placeholder: 'Search...' }}
    />
  );
}

react-select is a fully-featured, styled component out of the box. It includes theming, async loading, multi-select, and many other features with minimal setup. You can customize it, but you’re working within its design system.

// react-select: batteries-included
import Select from 'react-select';

function StyledSelect({ options }) {
  return (
    <Select
      options={options}
      placeholder="Choose an option..."
      isSearchable
    />
  );
}

⚙️ Accessibility and Keyboard Navigation

All three packages aim for accessibility, but their approaches differ:

• downshift strictly follows WAI-ARIA practices and gives you full control over ARIA attributes. You must implement proper roles and labels yourself, but the underlying state management ensures correct keyboard handling (arrow keys, Enter, Escape).

• react-autocomplete provides basic keyboard navigation (arrow keys, Enter) but leaves ARIA implementation to you. Its documentation includes accessibility notes, but it’s not as comprehensive as downshift.

• react-select ships with built-in ARIA compliance and extensive keyboard support (including type-to-search, tab navigation, and screen reader announcements). It’s the most accessible out of the box.

🎨 Styling and Customization

downshift has zero built-in styles. You bring your own CSS, CSS-in-JS, or styling library. This makes it ideal for design systems that require pixel-perfect control.

react-autocomplete also has no default styles, but its API is less flexible for complex layouts (e.g., it doesn’t easily support custom dropdown headers or footers).

react-select uses emotion for styling and supports theming via a styles prop or a theme function. You can override any part of its appearance, but escaping its component structure can be challenging if you need radically different markup.

// react-select: custom styling
const customStyles = {
  control: (provided) => ({
    ...provided,
    border: '2px solid blue',
    borderRadius: '8px'
  }),
  option: (provided, state) => ({
    ...provided,
    backgroundColor: state.isFocused ? '#f0f0f0' : 'white'
  })
};

<Select styles={customStyles} options={options} />

📦 Advanced Features

Async Loading:

• downshift: You manage data fetching yourself; just update the items prop.
• react-autocomplete: Pass an onMenuOpen or handle input changes to fetch data.
• react-select: Built-in loadOptions prop for async options with loading indicators.

Multi-select:

• downshift: Possible but requires manual state management for selected items.
• react-autocomplete: Not supported out of the box.
• react-select: Enable with isMulti prop.

Creatable Options (allowing users to add new items):

• downshift: Implement yourself by checking input value against items.
• react-autocomplete: Not built-in.
• react-select: Use the CreatableSelect component from react-select/creatable.

⚠️ Maintenance Status

As of 2024:

• react-autocomplete is deprecated. Its npm page states: "This package is no longer maintained. Please use downshift instead." New projects should avoid it.

• downshift and react-select are actively maintained with regular updates and strong community support.

🛠️ Real-World Decision Guide

When to use downshift

• You need full control over markup and behavior
• You’re building a design system or custom component library
• You require complex interactions (e.g., combobox + tag input)
• Your team values explicit, testable state logic

When to use react-autocomplete

• Do not use in new projects — it’s deprecated and lacks modern features
• Only consider for maintaining legacy codebases that already depend on it

When to use react-select

• You need a production-ready select with minimal effort
• Your design aligns with its default look or can be themed easily
• You require advanced features like async loading, multi-select, or creatable options
• You want built-in accessibility without deep ARIA knowledge

📊 Summary Table

💡 Final Recommendation

• Start with react-select if you need a quick, robust solution that works out of the box.
• Reach for downshift when you hit the limits of react-select or need to build something truly custom.
• Avoid react-autocomplete for new work — its functionality is better served by the other two, and it’s no longer maintained.

The right choice depends on your project’s needs: speed and convention (react-select) versus flexibility and control (downshift).