Combobox

items is the list of options, and unlike Select it's searchable by default — typing in the field filters it client-side. A bare string or number is the shorthand for an option whose label and value match; the long form is { label, value } with an optional icon and disabled. Mixing in { type: 'label' } and { type: 'divider' } entries is how a long list gets grouped.

modelValue is the selected value — the option's value, not its label, and an array of them once multiple is set. Pass it to control the selection yourself; v-model is the usual binding, so the reader's choice flows back.

defaultValue is what's selected on first render while the combobox still owns its own state. Reach for it when a starting choice is genuinely sensible — the reader's own country, the most common option — and you don't otherwise need to hold the value.

multiple lets more than one option be selected, and turns the selected set into removable tags inside the field.

placeholder is what the trigger reads while nothing is selected — distinct from searchPlaceholder, which belongs to the filter box inside the open list. Phrase it as the instruction it is, since it disappears the moment there's a value to show.

searchPlaceholder is the hint inside the search box at the top of the open list, defaulting to “Search…”. Worth naming what's being searched when the list holds something less obvious than its label suggests.

icon sits at the start of the trigger while nothing is selected; once an option carrying its own icon is chosen, that one replaces it. It's a way to say what the field is for without spending a label on it.

disabled locks the whole input. Individual options can opt out on their own with a per-item disabled instead.

clearable shows a button to clear the current selection.

variant picks between the ringed, transparent outline field and the lightly tinted soft one, which has its own section below.

content positions the dropdown relative to the field: side, align and sideOffset. Reach for it when the combobox sits near an edge the list would otherwise open across.

open controls whether the dropdown is showing. Pass it to drive the list from your own state and bind it with v-model:open so the reader's clicks still register; omit it and the combobox manages that itself.

defaultOpen starts the dropdown expanded on mount while leaving the open state uncontrolled — reasonable for a step whose only purpose is the choice, wrong wherever the field is one of several.

A lightly tinted field with no ring — a lower-emphasis alternative to outline.