Select

items is the list of options. A bare string or number is the shorthand — it becomes both the label and the value — while the long form is { label, value } with an optional icon and disabled. Two entries aren't options at all: { type: 'label' } prints a group heading and { type: 'divider' } draws a rule, which is how a long list gets sectioned.

modelValue is the selected value — the value of an option, not its label, and an array of them once multiple is set. Pass it to control the selection yourself; bind it with v-model for the usual case where the reader's choice should flow back.

defaultValue is what's selected on first render while the select still owns its own state. It's the right tool for a sensible starting choice — a default currency, the most common option — where you don't otherwise need to hold the value yourself.

multiple allows more than one option to be selected, which also switches modelValue from a single value to an array. The trigger then lists the choices instead of showing one.

placeholder is what the trigger reads while nothing is selected. Phrase it as the instruction it is — “Select a fruit” rather than “Fruit” — since unlike a FormField label it disappears as soon as there's a value to show.

icon sits at the start of the trigger while nothing is selected — once an option with its own icon is chosen, that one takes over. It's a way to mark what the field is for without spending a label on it.

icon is usually just a name, but it also takes { name, color, fill }. color tints an option's own icon, independent of whether that option is selected — use it to flag a choice at a glance, like a status dot or a severity level, without coloring the label along with it. fill draws the icon's filled variant, for the icons that ship one.

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

clearable shows a button to clear the current selection.

outline is the ringed field on the page background, and the right default wherever the control stands on its own. subtle is that same ring on a raised surface, matching a Card's own subtle, so the control belongs to the card it sits on. soft drops the ring for a plain fill. ghost shows nothing until hover, for a control sitting in a toolbar — it's the only one with a hover state, since without a resting fill it would otherwise give no sign it can be clicked.

content positions the dropdown relative to the trigger: side, align and sideOffset. Reach for it when the select 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 — opening it from a keyboard shortcut, closing it when a step finishes — and bind it with v-model:open so the reader's own clicks still register. Omit it and the select manages that itself.

defaultOpen starts the dropdown expanded on mount while leaving the open state uncontrolled. It's a narrow tool — a step that exists only to be answered — and wrong wherever the select is one field among several.