mantine-combobox

Mantine Combobox Skill

Written for Mantine 9.x.

Overview

Combobox provides low-level primitives for building any select-like UI. The built-in Select, MultiSelect, Autocomplete, and TagsInput components are all built on top of it.

Check for a ready-made component first

Build with Combobox primitives only when none of these fit:

<ComboboxPopover data={['React', 'Angular', 'Vue']} value={value} onChange={setValue}>
  <ComboboxPopover.Target>
    <Button variant="default">{value || 'Select framework'}</Button>
  </ComboboxPopover.Target>
</ComboboxPopover>

ComboboxPopover opens on target click by itself, marks the selected option with a check icon and handles keyboard navigation. Useful props: searchable, multiple (value becomes string[], the dropdown stays open while picking), allowDeselect={false} (one option is always selected), nothingFoundMessage, renderOption, limit, maxDropdownHeight, name (hidden input for forms), comboboxProps={{ width: 220, position: 'bottom-start' }}. data supports disabled items and groups like Select: [{ group: 'Size', items: [{ value: 'xs', label: 'XS' }] }]. It cannot render custom dropdown content (tabs, header, footer, create actions): use Combobox primitives for that.

TreeSelect takes nested data ({ value, label, children? }[], unique values) and renders an input with an expandable tree in the dropdown. Props include mode (single, multiple, or checkbox with parent-child cascade), searchable, clearable, renderNode. Build the tree from Combobox primitives instead when you need a different layout: only leaves selectable, a flat list of search results with full paths, or a button trigger. In that case render every visible row as a Combobox.Option and decide in onOptionSubmit whether the row selects or expands.