Combobox

Autocomplete search input that combines a text field with a filterable dropdown list.

When to use

• Many options — country/city selectors, user pickers.
• Search-as-you-type — filter a long list by typing.
• Tag selection — pick from a predefined set with search.

When NOT to use

• For few options (under 7) — use Select.
• For free-form text — use Input.
• For command palettes — use Command.

Import

import { Combobox } from '@mihcm/ui/Combobox';

Basic usage

const [value, setValue] = useState('');
 
<Combobox
  options={[
    { value: 'react', label: 'React' },
    { value: 'vue', label: 'Vue' },
    { value: 'angular', label: 'Angular' },
  ]}
  value={value}
  onValueChange={setValue}
  placeholder="Select framework…"
/>

Disabled options

<Combobox
  options={[
    { value: 'a', label: 'Active' },
    { value: 'b', label: 'Disabled', disabled: true },
  ]}
  value={value}
  onValueChange={setValue}
/>

Composition

• options accepts an array of { value, label, disabled? }. The component filters by label text.
• Use placeholder for the trigger text when no value is selected.
• For async search (API-backed options), debounce the filter and update options on each keystroke.
• disabled on individual options greys them out without removing them from the list.

Related

• Select — simpler dropdown without search.
• Command — full command palette.
• SearchField — standalone search input.