Components

Combobox

Single- and multi-select. Click to open; type to filter. Options can carry icon or avatar. The listbox is viewport-aware — it caps its height to the available space and flips above the field near the bottom of the window.

View in Figma
<Combobox
  value={value}
  onChange={setValue}
  options={options}
  placeholder="Select a building"
/>
<Combobox
  multiple
  value={values}
  onChange={setValues}
  options={options}
  placeholder="Select buildings"
/>
<Combobox
  value={value}
  onChange={setValue}
  options={options}
  placeholder="Select a building"
  error
/>
<Combobox
  value={value}
  onChange={setValue}
  options={options}
  placeholder="Select a building"
  disabled
/>
<Combobox
  value={value}
  onChange={setValue}
  options={options}
  placeholder="Select priority"
/>
<Combobox
  value={value}
  onChange={setValue}
  options={options}
  placeholder="Assign to…"
/>
<Combobox
  value={value}
  onChange={setValue}
  options={options}
  placeholder="Select a building"
  leadingIcon={icon}
/>
<Combobox
  multiple
  value={values}
  onChange={setValues}
  options={options}
  placeholder="Select buildings"
  leadingIcon={icon}
/>
<Combobox
  value={value}
  onChange={setValue}
  options={options}
  placeholder="Select a building"
  clearable
/>
Props
options:ComboboxOption[]
Items. Each has `{ value, label, group?, icon?, initials? }`.
value:string | string[] | null
Selected value. String for single, string[] for multi, null for empty.
onChange:(next) => void
Fires on selection change.
multiple:boolean= false
Allow multiple selections (renders chips).
clearable:boolean= false
Show a clear (×) on single-select once a value is set. Multi-select always has clear-all.
placeholder:string
Trigger placeholder when empty.
leadingIcon:IconDefinition
Icon anchored to the left of the trigger.
error:boolean= false
Error border treatment.
disabled:boolean= false
Disabled state.
Tokens