Combobox

@coinbase/cds-web@8.31.5

A flexible combobox component for both single and multi-selection, built for web applications with comprehensive accessibility support.

󰔂

Alpha componentAlpha components are stable and safe to use. They allow us to provide new and powerful features quickly, without forcing breaking changes. Components will exit the alpha status when their deprecated counterpart is removed in the next major version.

Import

import { Combobox } from '@coinbase/cds-web/alpha/combobox'

SourceView source codeStorybookView Storybook

---

Peer dependencies

• fuse.js: ^6.6.2

---

Related components

• Select

---

󰏖

View as Markdown

A note on search logic

We use fuse.js to power the fuzzy search logic for Combobox. You can override this search logic with your own using the filterFunction prop.

Multi-Select

Basic multi-selection combobox with search.

Loading...

󰙡

Live Code

function MultiSelect() {
const fruitOptions: SelectOption[] = [
  { value: 'apple', label: 'Apple' },
  { value: 'banana', label: 'Banana' },
  { value: 'cherry', label: 'Cherry' },
  { value: 'date', label: 'Date' },
  { value: 'elderberry', label: 'Elderberry' },
  { value: 'fig', label: 'Fig' },
  { value: 'grape', label: 'Grape' },
  { value: 'honeydew', label: 'Honeydew' },
  { value: 'kiwi', label: 'Kiwi' },
  { value: 'lemon', label: 'Lemon' },
  { value: 'mango', label: 'Mango' },
  { value: 'orange', label: 'Orange' },
  { value: 'papaya', label: 'Papaya' },
  { value: 'raspberry', label: 'Raspberry' },
  { value: 'strawberry', label: 'Strawberry' },
];

  const { value, onChange } = useMultiSelect({ initialValue: ['apple', 'banana'] });

  return (
      <Combobox
        label="Select fruits"
        onChange={onChange}
        options={fruitOptions}
        placeholder="Search and select fruits..."
        type="multi"
        value={value}
      />
  );
}

Single Select

Standard single-selection combobox with an option to clear the current value.

Loading...

󰙡

Live Code

function SingleSelect() {
  const singleSelectOptions = [
    { value: null, label: 'Remove selection' },
    { value: 'apple', label: 'Apple' },
    { value: 'banana', label: 'Banana' },
    { value: 'cherry', label: 'Cherry' },
    { value: 'date', label: 'Date' },
  ];

  const [value, setValue] = useState('apple');

  return (
    <Combobox
      label="Favorite fruit"
      onChange={setValue}
      options={singleSelectOptions}
      placeholder="Search fruits..."
      value={value}
    />
  );
}

Helper Text

Communicate limits or guidance by pairing helper text with multi-select usage.

Loading...

󰙡

Live Code

function HelperText() {
const fruitOptions: SelectOption[] = [
  { value: 'apple', label: 'Apple' },
  { value: 'banana', label: 'Banana' },
  { value: 'cherry', label: 'Cherry' },
  { value: 'date', label: 'Date' },
  { value: 'elderberry', label: 'Elderberry' },
  { value: 'fig', label: 'Fig' },
  { value: 'grape', label: 'Grape' },
  { value: 'honeydew', label: 'Honeydew' },
  { value: 'kiwi', label: 'Kiwi' },
  { value: 'lemon', label: 'Lemon' },
  { value: 'mango', label: 'Mango' },
  { value: 'orange', label: 'Orange' },
  { value: 'papaya', label: 'Papaya' },
  { value: 'raspberry', label: 'Raspberry' },
  { value: 'strawberry', label: 'Strawberry' },
];

  const { value, onChange } = useMultiSelect({ initialValue: ['apple', 'banana'] });

  return (
      <Combobox
      helperText="Choose more than one fruit"
        label="Select fruits"
        onChange={onChange}
        options={fruitOptions}
        placeholder="Search and select fruits..."
        type="multi"
        value={value}
      />
  );
}