Combobox

Comboboxes mix freeform search with constrained option selection.

Input Mode

Input mode works well when the control should feel like a searchable text field with inline suggestions.

Sizes

The combobox input and option list follow the same sizing rhythm as select so searchable controls can align with adjacent fields.

Widths

Combobox input controls use their content width by default. Add a width utility to the input when the control should be fixed-width or fill its parent.

Popup Mode

Popup mode is a better fit when the trigger should behave more like a select than a text field.

Multiple Selection

Chips are useful when the chosen options need to remain visible after selection.

Grouped Options

Grouped content is useful when the option list should be organized into labeled collections.

Allow Create

allowCreate offers creating a new option when the typed query isn’t already in the list.

Custom Values

allowCustomValue lets a single-select keep typed text that doesn’t match an option.

Higher-Level Input API

ComboboxInput provides a field-style API for the common single and async loading cases.

Async Search

When using ComboboxInput, pass fetchOptions={(query) => ...} without a static options array to enable async search mode automatically.

For large datasets, load matches from a remote source as the user types.