Combobox

@coinbase/cds-web@8.38.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 { Combobox } from '@coinbase/cds-web/alpha/combobox'

󰒨

Source

󰏖

Storybook

󰏖

View as Markdown

---

Peer dependencies

• fuse.js: ^6.6.2

---

Related components

• Select

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}
      />
  );
}

Borderless

You can remove the border from the combobox control by setting bordered to false.

Loading...

󰙡

Live Code

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

  const fruitOptions = [
    { value: 'apple', label: 'Apple' },
    { value: 'banana', label: 'Banana' },
    { value: 'cherry', label: 'Cherry' },
    { value: 'date', label: 'Date' },
    { value: 'elderberry', label: 'Elderberry' },
  ];

  const [singleValue, setSingleValue] = useState('apple');
  const { value: multiValue, onChange: multiOnChange } = useMultiSelect({
    initialValue: ['apple'],
  });

  return (
    <VStack gap={4}>
      <Combobox
        bordered={false}
        label="Borderless single select"
        onChange={setSingleValue}
        options={singleSelectOptions}
        placeholder="Search fruits..."
        value={singleValue}
      />
      <Combobox
        bordered={false}
        label="Borderless multi select"
        onChange={multiOnChange}
        options={fruitOptions}
        placeholder="Search fruits..."
        type="multi"
        value={multiValue}
      />
    </VStack>
  );
}