ComboBox

The ComboBox component provides a searchable dropdown interface that allows users to select from a list of options. It combines the functionality of an input field with a dropdown menu, making it ideal for scenarios where users need to search through a large list of options.

Usage Guidelines

Basic ComboBox

Use the ComboBox component when you need to provide a searchable list of options for users to select from.

<ComboBox
  items={[
    { id: "us", name: "United States" },
    { id: "ca", name: "Canada" },
    { id: "mx", name: "Mexico" },
    { id: "uk", name: "United Kingdom" },
    { id: "fr", name: "France" },
    { id: "de", name: "Germany" },
    { id: "es", name: "Spain" },
    { id: "it", name: "Italy" },
  ]}
  getText={(item) => item.name}
  showSearch={true}
/>

With Default Value

You can set default selected items using the selectedItems prop.

<ComboBox
  items={[
    { id: "us", name: "United States" },
    { id: "ca", name: "Canada" },
    { id: "mx", name: "Mexico" },
    { id: "uk", name: "United Kingdom" },
    { id: "fr", name: "France" },
    { id: "de", name: "Germany" },
    { id: "es", name: "Spain" },
    { id: "it", name: "Italy" },
  ]}
  getText={(item) => item.name}
  selectedItems={[{ id: "us", name: "United States" }]}
  showSearch={true}
/>

Disabled State

Use the isDisabled prop to prevent user interaction with the ComboBox.

<ComboBox
  items={[
    { id: "us", name: "United States" },
    { id: "ca", name: "Canada" },
    { id: "mx", name: "Mexico" },
  ]}
  getText={(item) => item.name}
  isDisabled={true}
  showSearch={true}
/>

Multiple Selection

Use selectionMode="multiple" to allow selecting multiple items.

<ComboBox
  items={[
    { id: "bug", name: "Bug", color: "#ef4444" },
    { id: "docs", name: "Documentation", color: "#64748b" },
    { id: "enh", name: "Enhancement", color: "#8b5cf6" },
    { id: "first", name: "Good first issue", color: "#22c55e" },
  ]}
  getText={(item) => item.name}
  selectionMode="multiple"
  withColorIndicator={true}
  showSearch={true}
/>

Custom Rendering

You can customize how items are rendered using renderItem and renderSelectedItem props.

<ComboBox
  items={users}
  getText={(user) => user.username}
  renderItem={(user) => (
    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
      <div
        style={{
          width: 8,
          height: 8,
          borderRadius: "50%",
          backgroundColor: user.color,
        }}
      />
      <span>{user.username}</span>
    </div>
  )}
  renderSelectedItem={(user) => (
    <span style={{ color: "white", fontWeight: "bold" }}>
      ✓ {user.username}
    </span>
  )}
  showSearch={true}
/>

Props

interface ComboBoxProps