# Combobox

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

## Import

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

## Examples

### A note on search logic

We use [fuse.js](https://www.fusejs.io/) 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.

```tsx live
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.

```jsx live
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.

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

### Alignment

The alignment of the selected value(s) can be adjusted using the `align` prop.

::::note
Left / right alignment is preferred for styling.
::::

```tsx live
function AlignmentExample() {
  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' },
  ];
  const { value: multiValue, onChange: multiOnChange } = useMultiSelect({
    initialValue: ['apple', 'banana'],
  });

  return (
    <VStack gap={1}>
      <Combobox
        label="Default align - start"
        onChange={multiOnChange}
        options={fruitOptions}
        placeholder="Empty value"
        type="multi"
        value={multiValue}
      />
      <Combobox
        align="end"
        label="End align"
        onChange={multiOnChange}
        options={fruitOptions}
        placeholder="Empty value"
        type="multi"
        value={multiValue}
      />
    </VStack>
  );
}
```

### Borderless

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

```jsx live
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>
  );
}
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `onChange` | `(value: Type extends multi ? SelectOptionValue \| SelectOptionValue[] \| null : SelectOptionValue \| null) => void` | Yes | `-` | - |
| `options` | `SelectOptionList<Type, SelectOptionValue>` | Yes | `-` | Array of options to display in the select dropdown. Can be individual options or groups with label and options |
| `value` | `string \| SelectOptionValue[] \| null` | Yes | `-` | - |
| `ComboboxControlComponent` | `ComboboxControlComponent` | No | `-` | Custom ComboboxControlComponent to wrap SelectControlComponent. This component must be a stable reference |
| `SelectAllOptionComponent` | `SelectOptionComponent<Type, SelectOptionValue>` | No | `-` | Custom component to render the Select All option |
| `SelectControlComponent` | `SelectControlComponent<Type, SelectOptionValue>` | No | `-` | Custom component to render the select control |
| `SelectDropdownComponent` | `SelectDropdownComponent<Type, SelectOptionValue>` | No | `-` | Custom component to render the dropdown container |
| `SelectEmptyDropdownContentsComponent` | `SelectEmptyDropdownContentComponent` | No | `-` | Custom component to render when no options are available |
| `SelectOptionComponent` | `SelectOptionComponent<Type, SelectOptionValue>` | No | `-` | Custom component to render individual options |
| `SelectOptionGroupComponent` | `SelectOptionGroupComponent<Type, SelectOptionValue>` | No | `-` | Custom component to render group headers |
| `accessibilityRoles` | `{ dropdown?: AriaHasPopupType; option?: string \| undefined; } \| undefined` | No | `-` | Accessibility roles for dropdown and option elements |
| `accessory` | `ReactElement<CellAccessoryProps, string \| JSXElementConstructor<any>>` | No | `-` | Accessory element rendered at the end of the cell (e.g., chevron). |
| `align` | `center \| start \| end` | No | `'start'` | Alignment of the value node. |
| `bordered` | `boolean` | No | `true` | Add a border around all sides of the box. Determines if the control should have a default border. |
| `className` | `string` | No | `-` | CSS class name for the root element |
| `classNames` | `{ root?: string; control?: string \| undefined; controlStartNode?: string \| undefined; controlInputNode?: string \| undefined; controlValueNode?: string \| undefined; controlLabelNode?: string \| undefined; controlHelperTextNode?: string \| undefined; controlEndNode?: string \| undefined; dropdown?: string \| undefined; option?: string \| undefined; optionCell?: string \| undefined; optionContent?: string \| undefined; optionLabel?: string \| undefined; optionDescription?: string \| undefined; selectAllDivider?: string \| undefined; emptyContentsContainer?: string \| undefined; emptyContentsText?: string \| undefined; optionGroup?: string \| undefined; } \| undefined` | No | `-` | Custom class names for individual elements of the Select component |
| `clearAllLabel` | `string` | No | `-` | Label for the Clear All option in multi-select mode |
| `compact` | `boolean` | No | `-` | Whether to use compact styling for the select |
| `controlAccessibilityLabel` | `string` | No | `-` | Accessibility label for the control |
| `defaultOpen` | `boolean` | No | `-` | Initial open state when component mounts (uncontrolled mode) |
| `defaultSearchText` | `string` | No | `-` | Default search text value for uncontrolled mode |
| `disableClickOutsideClose` | `boolean` | No | `-` | Whether clicking outside the dropdown should close it |
| `disabled` | `boolean` | No | `false` | Toggles input interactability and opacity |
| `emptyOptionsLabel` | `string` | No | `-` | Label displayed when there are no options available |
| `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | End-aligned content (e.g., value, status). Replaces the deprecated detail prop. |
| `endNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Adds content to the end of the inner input. Refer to diagram for location of endNode in InputStack component |
| `filterFunction` | `((options: SelectOptionList<Type, SelectOptionValue>, searchText: string) => SelectOption<SelectOptionValue>[])` | No | `-` | Custom filter function for searching options |
| `helperText` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Helper text displayed below the select |
| `hiddenSelectedOptionsLabel` | `string` | No | `-` | Label to show for showcasing count of hidden selected options |
| `hideSearchInput` | `boolean` | No | `-` | Hide the search input |
| `hideSelectAll` | `boolean` | No | `-` | Whether to hide the Select All option in multi-select mode |
| `label` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Label displayed above the control |
| `labelVariant` | `inside \| outside` | No | `'outside'` | The variant of the label. Only used when compact is not true. |
| `maxSelectedOptionsToShow` | `number` | No | `-` | Maximum number of selected options to show before truncating |
| `media` | `ReactElement` | No | `-` | Media rendered at the start of the cell (icon, avatar, image, etc). |
| `onSearch` | `((searchText: string) => void)` | No | `-` | Search text change handler |
| `open` | `boolean` | No | `-` | Controlled open state of the dropdown |
| `placeholder` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Placeholder text displayed when no option is selected |
| `ref` | `null \| (instance: SelectRef \| null) => void \| RefObject<SelectRef>` | No | `-` | - |
| `removeSelectedOptionAccessibilityLabel` | `string` | No | `-` | Accessibility label for each chip in a multi-select |
| `searchText` | `string` | No | `-` | Controlled search text value |
| `selectAllLabel` | `string` | No | `-` | Label for the Select All option in multi-select mode |
| `setOpen` | `((open: boolean \| ((open: boolean) => boolean)) => void)` | No | `-` | Callback to update the open state |
| `startNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Adds content to the start of the inner input. Refer to diagram for location of startNode in InputStack component |
| `style` | `CSSProperties` | No | `-` | Inline styles for the root element |
| `styles` | `{ root?: CSSProperties; control?: CSSProperties \| undefined; controlStartNode?: CSSProperties \| undefined; controlInputNode?: CSSProperties \| undefined; controlValueNode?: CSSProperties \| undefined; controlLabelNode?: CSSProperties \| undefined; controlHelperTextNode?: CSSProperties \| undefined; controlEndNode?: CSSProperties \| undefined; controlBlendStyles?: InteractableBlendStyles \| undefined; dropdown?: CSSProperties \| undefined; option?: CSSProperties \| undefined; optionCell?: CSSProperties \| undefined; optionContent?: CSSProperties \| undefined; optionLabel?: CSSProperties \| undefined; optionDescription?: CSSProperties \| undefined; optionBlendStyles?: InteractableBlendStyles \| undefined; selectAllDivider?: CSSProperties \| undefined; emptyContentsContainer?: CSSProperties \| undefined; emptyContentsText?: CSSProperties \| undefined; optionGroup?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for individual elements of the Select component |
| `testID` | `string` | No | `-` | Test ID for the root element |
| `type` | `multi \| single` | No | `-` | Whether the select allows single or multiple selections |
| `variant` | `primary \| secondary \| positive \| negative \| foregroundMuted \| foreground` | No | `foregroundMuted` | Determines the sentiment of the input. Because we allow startContent and endContent to be custom ReactNode, the content placed inside these slots will not change colors according to the variant. You will have to add that yourself |


## Styles

| Selector | Static class name | Description |
| --- | --- | --- |
| `root` | `-` | Root container element |
| `control` | `-` | Control element |
| `controlStartNode` | `-` | Start node element |
| `controlInputNode` | `-` | Input node element |
| `controlValueNode` | `-` | Value node element |
| `controlLabelNode` | `-` | Label node element |
| `controlHelperTextNode` | `-` | Helper text node element |
| `controlEndNode` | `-` | End node element |
| `controlBlendStyles` | `-` | Blend styles for control interactivity |
| `dropdown` | `-` | Dropdown container element |
| `option` | `-` | Option element |
| `optionCell` | `-` | Option cell element |
| `optionContent` | `-` | Option content wrapper |
| `optionLabel` | `-` | Option label element |
| `optionDescription` | `-` | Option description element |
| `optionBlendStyles` | `-` | Option blend styles for interactivity |
| `selectAllDivider` | `-` | Select all divider element |
| `emptyContentsContainer` | `-` | Empty contents container element |
| `emptyContentsText` | `-` | Empty contents text element |
| `optionGroup` | `-` | Option group element |


