Combobox

Combobox picks from a fixed list too long to browse, like assignees, countries, time zones or labels. Typing narrows the list, options can sit in groups, and multiple picks show as removable chips.

Install

bashnpx shadcn@4.18.0 add @siteplane/combobox

Import it from @/siteplane/components/combobox. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

• vs Select: Pick Select for a short list where typing adds nothing.
• vs Autocomplete: Pick Autocomplete when the typed text is the value and suggestions are optional.
• vs Command: Pick Command for a searchable list of actions or navigation. Combobox holds a form value.
• vs Checkbox Group: Pick Checkbox Group when a handful of multi-select options can all stay visible.

Rules

• Set size and variant on ComboboxInput, and turn on showClear when clearing is common.
• For multi-select, set multiple and render ComboboxChips inside ComboboxChips through ComboboxValue. The chips already have a remove button.
• When items are objects, provide itemToStringLabel for display and filtering and itemToStringValue for submission.
• Render a ComboboxEmpty so a query with no matches explains itself, and handle async loading through ComboboxStatus.
• For a select-looking trigger with search, use ComboboxTrigger render={<SelectButton />} with an embedded ComboboxInput in the popup.
• Use indicatorPosition="end" on items that lead with an avatar or logo.

Reference

• Combobox docs, with every prop, part and example (Markdown)
• Siteplane UI 1.8.1, Forms & selection. Read the installed source under src/siteplane before relying on an API.