React ComboBox - Editable Select Input for React Forms

Overview

The ComboBox combines an editable text box with a pop-up list that filters as the user types. It works with arrays and remote endpoints, supports templates for items and headers, and includes ARIA-ready keyboard navigation for accessible selection.

React ComboBox code example

Here is simple TSX to render a ComboBox bound to a small list of strings:

import { ComboBox } from '@syncfusion/react-dropdowns';

const fruits: string[] = ['Apple', 'Banana', 'Cherry', 'Date', 'Grape'];

export default function App() {
  return (
    <div className="component-section">
      <ComboBox dataSource={fruits} placeholder="Choose a fruit" />
    </div>
  );
}

Controlled mode

The ComboBox component supports both controlled and uncontrolled modes. The controlled mode provides full control over updating and displaying values, typically via the value prop and onChange event, for easier integration with forms. The uncontrolled mode manages its own internal state for the selected value. It is simpler to use, requires less code, and is initialized with a defaultValue prop, making it ideal for basic input.

• Controlled vs. uncontrolled demo

High performance

With the virtualization feature, the ComboBox displays only the visible items and loads additional suggestions on demand as users type. This ensures fast, smooth performance even when working with very large datasets.

• Virtualization demo

Flexible data binding

Bind to simple arrays or fetch suggestions from remote APIs. Server filtering keeps the client lightweight by returning only relevant matches.

• Remote data binding demo