MultiColumnCombobox

Combobox whose popup is a small table — search across columns and pick structured rows.

MultiColumnCombobox renders its dropdown as a small table, so each option is a structured row with several columns. Use it for picking entities identified by more than one field — SKU + name + stock, or employee + department + role. You define columns (each with a key and header) and pass items (objects with an id plus a string per column key); typing searches across every column. It is controlled by the selected row id, and displayKey chooses which column shows in the input once selected.

Example

Preview

Product

import { MultiColumnCombobox } from '@officina/ui';
import { useState } from 'react';

function ProductPicker() {
  const [value, setValue] = useState<string | null>(null);
  return (
    <MultiColumnCombobox
      value={value}
      onChange={setValue}
      displayKey="name"
      placeholder="Search products…"
      columns={[
        { key: 'sku', header: 'SKU' },
        { key: 'name', header: 'Name' },
        { key: 'stock', header: 'Stock' },
      ]}
      items={[
        { id: '1', sku: 'AB-100', name: 'Widget', stock: '42' },
        { id: '2', sku: 'AB-200', name: 'Gadget', stock: '7' },
      ]}
    />
  );
}

API

Prop	Type	Default	Description
columns*	MultiColumnComboboxColumn[]	—	Column definitions shown in the dropdown grid.
items*	MultiColumnComboboxItem[]	—	Selectable rows, each carrying a value per column.
onChange*	(id: string \| null) => void	—	Called with the new selection id (or null when cleared).
value*	string \| null	—	Id of the selected item, or null.
clearable	boolean	true	Show a clear button when a value is selected.
disabled	boolean	false	Disable the control.
displayKey	string	—	Column key shown in the input when an item is selected. Defaults to first column.
emptyMessage	string	No results	Message shown when no items match the query.
label	string	—	Visible field label.
placeholder	string	Search…	Placeholder when nothing is selected.

Example

API

On this page