Building Select and Autocomplete Components in React: A Technical Deep-Dive

Select dropdowns and autocomplete inputs are everywhere in modern web applications. But building them well is harder than it looks — you need to handle keyboard navigation, accessibility, async data loading, and custom styling. The five packages we're comparing (@commercetools-uikit/async-select-input, downshift, react-autosuggest, react-select, react-select-search) each take different approaches to solving these problems. Let's break down how they work and when to use each one.

🎯 Core Philosophy: Building Blocks vs Ready-Made Components

The biggest difference between these packages is how much they give you out of the box.

react-select is a complete, styled component. You import it and get a working select with minimal code.

import Select from 'react-select';

function MyComponent() {
  const options = [
    { value: 'chocolate', label: 'Chocolate' },
    { value: 'strawberry', label: 'Strawberry' }
  ];

  return <Select options={options} />;
}

downshift gives you hooks and utilities to build your own component. You control every part of the UI.

import { useSelect } from 'downshift';

function MySelect({ items }) {
  const {
    isOpen,
    getToggleButtonProps,
    getMenuProps,
    getItemProps,
    selectedItem
  } = useSelect({ items });

  return (
    <div>
      <button {...getToggleButtonProps()}>
        {selectedItem?.label || 'Select an item'}
      </button>
      <ul {...getMenuProps()}>
        {isOpen && items.map((item, index) => (
          <li key={item.id} {...getItemProps({ item, index })}>
            {item.label}
          </li>
        ))}
      </ul>
    </div>
  );
}

react-autosuggest focuses on suggestion boxes where users type to get recommendations.

import Autosuggest from 'react-autosuggest';

function MyAutosuggest({ suggestions }) {
  const [value, setValue] = useState('');
  const [suggestionsState, setSuggestions] = useState([]);

  const onSuggestionsFetchRequested = ({ value }) => {
    setSuggestions(getSuggestions(value));
  };

  return (
    <Autosuggest
      suggestions={suggestionsState}
      onSuggestionsFetchRequested={onSuggestionsFetchRequested}
      getSuggestionValue={suggestion => suggestion.name}
      renderSuggestion={suggestion => <div>{suggestion.name}</div>}
      inputProps={{ value, onChange: (e, { newValue }) => setValue(newValue) }}
    />
  );
}

react-select-search sits between react-select and downshift — pre-built but simpler.

import { ReactSelectSearch } from 'react-select-search';

function MyComponent() {
  const options = [
    { name: 'Chocolate', value: 'chocolate' },
    { name: 'Strawberry', value: 'strawberry' }
  ];

  return <ReactSelectSearch options={options} />;
}

@commercetools-uikit/async-select-input is designed for the Commercetools design system with async loading built in.

import AsyncSelectInput from '@commercetools-uikit/async-select-input';

function MyComponent() {
  const loadOptions = async (inputValue) => {
    const response = await fetch(`/api/options?q=${inputValue}`);
    return response.json();
  };

  return <AsyncSelectInput loadOptions={loadOptions} />;
}

🔍 Async Data Loading: Built-In vs Manual

Loading options from an API is a common requirement. Here's how each package handles it.

react-select has built-in async support with AsyncSelect component.

import AsyncSelect from 'react-select/async';

const loadOptions = async (inputValue) => {
  const response = await fetch(`/api/options?q=${inputValue}`);
  const data = await response.json();
  return data.options;
};

function MyComponent() {
  return <AsyncSelect loadOptions={loadOptions} />;
}

downshift requires you to manage async state yourself.

import { useCombobox } from 'downshift';

function AsyncCombobox() {
  const [items, setItems] = useState([]);
  const [isLoading, setIsLoading] = useState(false);

  const handleInputChange = async (inputValue) => {
    setIsLoading(true);
    const response = await fetch(`/api/options?q=${inputValue}`);
    const data = await response.json();
    setItems(data.options);
    setIsLoading(false);
  };

  const { getInputProps, getMenuProps, getItemProps } = useCombobox({
    items,
    onInputValueChange: ({ inputValue }) => handleInputChange(inputValue)
  });

  return (
    <div>
      <input {...getInputProps()} />
      <ul {...getMenuProps()}>
        {items.map((item, index) => (
          <li key={item.id} {...getItemProps({ item, index })}>
            {item.label}
          </li>
        ))}
      </ul>
    </div>
  );
}

react-autosuggest uses callback-based fetching.

import Autosuggest from 'react-autosuggest';

const onSuggestionsFetchRequested = async ({ value }) => {
  const response = await fetch(`/api/options?q=${value}`);
  const data = await response.json();
  setSuggestions(data.options);
};

function MyComponent() {
  return (
    <Autosuggest
      suggestions={suggestions}
      onSuggestionsFetchRequested={onSuggestionsFetchRequested}
      getSuggestionValue={suggestion => suggestion.label}
      renderSuggestion={suggestion => <div>{suggestion.label}</div>}
      inputProps={{ value, onChange }}
    />
  );
}

react-select-search supports async through custom props.

import { ReactSelectSearch } from 'react-select-search';

function MyComponent() {
  const [options, setOptions] = useState([]);

  const handleSearch = async (searchTerm) => {
    const response = await fetch(`/api/options?q=${searchTerm}`);
    const data = await response.json();
    setOptions(data.options);
  };

  return <ReactSelectSearch options={options} onSearch={handleSearch} />;
}

@commercetools-uikit/async-select-input has async loading as its primary feature.

import AsyncSelectInput from '@commercetools-uikit/async-select-input';

function MyComponent() {
  const loadOptions = async (inputValue) => {
    const response = await fetch(`/api/options?q=${inputValue}`);
    return response.json();
  };

  return (
    <AsyncSelectInput
      loadOptions={loadOptions}
      loadingPlaceholder="Loading..."
    />
  );
}

♿ Accessibility: Handled for You vs Build It Yourself

Accessibility is critical for select components. Keyboard navigation, ARIA attributes, and screen reader support all matter.

react-select handles accessibility out of the box with proper ARIA labels and keyboard support.

import Select from 'react-select';

// Built-in accessibility - no extra code needed
<Select
  options={options}
  aria-label="Choose a flavor"
  inputId="flavor-select"
/>

downshift provides the tools but you must apply them correctly.

import { useSelect } from 'downshift';

function AccessibleSelect({ items, label }) {
  const {
    isOpen,
    getToggleButtonProps,
    getMenuProps,
    getItemProps,
    selectedItem,
    highlightedIndex
  } = useSelect({ items });

  return (
    <div>
      <label id="select-label">{label}</label>
      <button
        {...getToggleButtonProps({
          'aria-labelledby': 'select-label',
          'aria-haspopup': 'listbox'
        })}
      >
        {selectedItem?.label || 'Select'}
      </button>
      <ul {...getMenuProps({ 'aria-labelledby': 'select-label' })}>
        {isOpen && items.map((item, index) => (
          <li
            key={item.id}
            {...getItemProps({
              item,
              index,
              role: 'option',
              'aria-selected': highlightedIndex === index
            })}
          >
            {item.label}
          </li>
        ))}
      </ul>
    </div>
  );
}

react-autosuggest includes accessibility features but requires proper configuration.

import Autosuggest from 'react-autosuggest';

<Autosuggest
  suggestions={suggestions}
  onSuggestionsFetchRequested={onSuggestionsFetchRequested}
  getSuggestionValue={suggestion => suggestion.name}
  renderSuggestion={suggestion => <div>{suggestion.name}</div>}
  inputProps={{
    value,
    onChange,
    'aria-label': 'Search for options',
    id: 'autosuggest-input',
    role: 'combobox',
    'aria-autocomplete': 'list',
    'aria-controls': 'suggestions-list',
    'aria-expanded': suggestions.length > 0
  }}
  theme={{
    suggestionsContainerOpen: 'suggestions-container-open',
    suggestion: 'suggestion',
    suggestionHighlighted: 'suggestion-highlighted'
  }}
/>

react-select-search provides basic accessibility with proper ARIA attributes.

import { ReactSelectSearch } from 'react-select-search';

<ReactSelectSearch
  options={options}
  ariaLabel="Select an option"
  inputId="select-search-input"
  className="custom-select-search"
/>

@commercetools-uikit/async-select-input follows Commercetools accessibility standards.

import AsyncSelectInput from '@commercetools-uikit/async-select-input';

<AsyncSelectInput
  loadOptions={loadOptions}
  label="Select option"
  name="option-select"
  aria-label="Choose an option from the list"
/>

🎨 Styling and Customization: CSS-in-JS vs Class Names vs Headless

How you customize the look varies significantly between packages.

react-select uses CSS-in-JS with a styles prop for deep customization.

import Select from 'react-select';

const customStyles = {
  control: (base, state) => ({
    ...base,
    borderColor: state.isFocused ? '#0066cc' : base.borderColor,
    boxShadow: state.isFocused ? '0 0 0 1px #0066cc' : base.boxShadow
  }),
  option: (base, state) => ({
    ...base,
    backgroundColor: state.isSelected ? '#0066cc' : base.backgroundColor,
    color: state.isSelected ? 'white' : base.color
  })
};

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

downshift gives you plain HTML elements — style them however you want.

import { useSelect } from 'downshift';

function StyledSelect({ items }) {
  const { isOpen, getToggleButtonProps, getMenuProps, getItemProps, selectedItem } = useSelect({ items });

  return (
    <div className="select-container">
      <button {...getToggleButtonProps()} className="select-button">
        {selectedItem?.label || 'Select'}
      </button>
      {isOpen && (
        <ul {...getMenuProps()} className="select-menu">
          {items.map((item, index) => (
            <li key={item.id} {...getItemProps({ item, index })} className="select-option">
              {item.label}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

react-autosuggest uses a theme prop with class names.

import Autosuggest from 'react-autosuggest';

const theme = {
  container: 'autosuggest-container',
  input: 'autosuggest-input',
  suggestionsContainer: 'autosuggest-suggestions-container',
  suggestionsContainerOpen: 'autosuggest-suggestions-container-open',
  suggestion: 'autosuggest-suggestion',
  suggestionHighlighted: 'autosuggest-suggestion-highlighted'
};

<Autosuggest suggestions={suggestions} theme={theme} {...otherProps} />;

react-select-search uses className props for customization.

import { ReactSelectSearch } from 'react-select-search';

<ReactSelectSearch
  options={options}
  className="custom-select-search"
  optionClassName="custom-option"
  valueClassName="custom-value"
/>

@commercetools-uikit/async-select-input uses Commercetools design tokens.

import AsyncSelectInput from '@commercetools-uikit/async-select-input';

<AsyncSelectInput
  loadOptions={loadOptions}
  className="custom-async-select"
  horizontalConstraint="scale"
/>

📦 Multi-Select Support: Native vs Add-On

Some use cases require selecting multiple values. Here's how each package handles it.

react-select has built-in multi-select with the isMulti prop.

import Select from 'react-select';

<Select
  options={options}
  isMulti={true}
  placeholder="Select multiple flavors"
  onChange={(selected) => console.log(selected)}
/>

downshift requires manual implementation for multi-select.

import { useMultipleSelection } from 'downshift';

function MultiSelect({ items }) {
  const {
    selectedItems,
    addSelectedItem,
    removeSelectedItem,
    getDropdownProps
  } = useMultipleSelection();

  const {
    isOpen,
    getToggleButtonProps,
    getMenuProps,
    getItemProps
  } = useSelect({
    items,
    ...getDropdownProps()
  });

  return (
    <div>
      {selectedItems.map(item => (
        <span key={item.id}>
          {item.label}
          <button onClick={() => removeSelectedItem(item)}>×</button>
        </span>
      ))}
      <button {...getToggleButtonProps()}>Select</button>
      <ul {...getMenuProps()}>
        {isOpen && items.map((item, index) => (
          <li
            key={item.id}
            {...getItemProps({
              item,
              index,
              onClick: () => addSelectedItem(item)
            })}
          >
            {item.label}
          </li>
        ))}
      </ul>
    </div>
  );
}

react-autosuggest doesn't have built-in multi-select — you manage selected values yourself.

import Autosuggest from 'react-autosuggest';

function MultiAutosuggest({ suggestions }) {
  const [selected, setSelected] = useState([]);
  const [value, setValue] = useState('');

  const onSuggestionSelected = (event, { suggestion }) => {
    setSelected([...selected, suggestion]);
    setValue('');
  };

  return (
    <div>
      {selected.map(item => <span key={item.id}>{item.name}</span>)}
      <Autosuggest
        suggestions={suggestions}
        onSuggestionSelected={onSuggestionSelected}
        inputProps={{ value, onChange }}
      />
    </div>
  );
}

react-select-search supports multi-select through configuration.

import { ReactSelectSearch } from 'react-select-search';

<ReactSelectSearch
  options={options}
  multi={true}
  onChange={(selected) => console.log(selected)}
/>

@commercetools-uikit/async-select-input focuses on single-select async scenarios.

import AsyncSelectInput from '@commercetools-uikit/async-select-input';

// Single select only - multi-select requires different component
<AsyncSelectInput
  loadOptions={loadOptions}
  value={selectedValue}
  onChange={setSelectedValue}
/>

🚨 Maintenance Status and Long-Term Viability

Before choosing any package, check its current maintenance status.

react-select is actively maintained with regular releases. It's the most popular choice for production select components and has strong community support.

downshift is actively maintained by the Kent C. Dodds team and widely used in design systems. It's stable and follows accessibility best practices.

react-autosuggest is mature and stable but receives fewer updates. It's well-suited for projects that need a reliable autocomplete without frequent changes.

react-select-search has slower release cycles but remains functional. Check the repository for recent activity before committing to it for large projects.

@commercetools-uikit/async-select-input is maintained as part of the Commercetools UI Kit. It's best suited for projects already using Commercetools products — using it standalone may create dependency issues long-term.

📊 Quick Comparison Table

💡 Final Recommendations

Pick react-select when you need a production-ready component fast and don't mind the bundle size. It's the safest choice for most admin panels and dashboards.

Pick downshift when you're building a design system or need complete control over the UI. The extra code is worth it for custom designs.

Pick react-autosuggest when you specifically need a search-as-you-type suggestion box rather than a full select dropdown.

Pick react-select-search when react-select feels too heavy but you still need search functionality in a select.

Pick @commercetools-uikit/async-select-input only if you're already using the Commercetools UI Kit — otherwise, the tight coupling to their design system creates unnecessary constraints.

🎯 The Bottom Line

All five packages solve the same core problem but with different trade-offs. react-select and react-select-search give you working components quickly. downshift gives you building blocks for custom solutions. react-autosuggest specializes in suggestion boxes. @commercetools-uikit/async-select-input fits into a specific ecosystem.

The right choice depends on your project's needs: speed to market, design flexibility, bundle size constraints, and existing technology stack. There's no single winner — only the best fit for your specific situation.