Combobox

A text input that filters a dropdown of options as you type. For async / server-side filtering, control the text with inputValue + onInputChange and swap options yourself. allowCustomValue accepts free text that matches no option.

Assignee


import { Combobox } from '@gg-software/ui';
 
<Combobox label="Assignee" options={people} onChange={(value) => setAssignee(value)} />
 
// async filtering
<Combobox
    options={results}
    inputValue={query}
    onInputChange={(text) => {
        setQuery(text);
        fetchResults(text);
    }}
/>
 
// free text allowed
<Combobox options={suggestions} allowCustomValue />

Options use the same SelectOption shape as Select.

Props

Prop	Type	Default	Description
`options`*	`SelectOption<T>[]`	—
`value`	`T \| null`	—
`defaultValue`	`T \| null`	`null`
`onChange`	`((value: T \| null, option: SelectOption<T> \| null) => void)`	—
`inputValue`	`string`	—	controlled input text (for server-side / async filtering)
`onInputChange`	`((text: string) => void)`	—
`allowCustomValue`	`boolean`	`false`	accept text that doesn't match any option (best with string options)
`placeholder`	`string`	`Type to search…`
`label`	`ReactNode`	—
`hint`	`ReactNode`	—
`error`	`ReactNode`	—
`required`	`boolean`	—
`size`	`"sm" \| "md" \| "lg"`	`md`
`status`	`"warning" \| "error"`	—
`disabled`	`boolean`	`false`
`clearable`	`boolean`	`false`
`filterOption`	`((query: string, option: SelectOption<T>) => boolean)`	—
`emptyText`	`ReactNode`	`No options`
`id`	`string`	—
`name`	`string`	—
`className`	`string`	—

* required · generated from packages/ui/src/input/Combobox/Combobox.tsx