A dropdown select with an optional search box, grouped or flat options, per-option icons and a loading state. Options may be primitives or `{ value, label, icon?, group? }` objects. The panel is teleported so it escapes overflow clipping.
Ejemplos
Searchable, grouped
Options grouped into sections with per-option icons.
<UiSelect
v-model="state.tool"
searchable
placeholder="Pick a tool"
:options="[
{ value: 'pen', label: 'Pen', icon: 'mdi:pen', group: 'Drawing' },
{ value: 'eraser', label: 'Eraser', icon: 'mdi:eraser', group: 'Drawing' },
{ value: 'text', label: 'Text', icon: 'mdi:format-text', group: 'Insert' },
]"
class="max-w-xs"
/>Plain values
A flat list built from primitive strings.
<UiSelect
v-model="state.lang"
placeholder="Language"
:options="['English', 'Español', 'Français']"
class="max-w-xs"
/>Subtitles and icons
Each option can carry an icon and a secondary subtitle line.
<UiSelect
v-model="state.member"
placeholder="Assign to"
:options="[
{ value: 'ada', label: 'Ada Lovelace', subtitle: 'Owner', icon: 'mdi:account' },
{ value: 'alan', label: 'Alan Turing', subtitle: 'Editor', icon: 'mdi:account' },
]"
class="max-w-xs"
/>Sizes
Three trigger sizes: xs, sm and md.
<div class="flex flex-wrap items-start gap-3">
<UiSelect v-model="state.x" size="xs" :block="false" placeholder="Extra small" :options="['One', 'Two']" />
<UiSelect v-model="state.y" size="sm" :block="false" placeholder="Small" :options="['One', 'Two']" />
<UiSelect v-model="state.z" size="md" :block="false" placeholder="Medium" :options="['One', 'Two']" />
</div>Loading and disabled
A spinner with custom text while options load, and a disabled trigger.
<div class="flex max-w-xs flex-col gap-3">
<UiSelect v-model="state.a" :options="[]" loading loading-text="Fetching…" />
<UiSelect v-model="state.b" :options="['Locked']" disabled placeholder="Disabled" />
</div>Props
| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
| modelValue | string | number | boolean | null | '' | The selected value (v-model). |
| options | array | () => [] | Primitives, or `{ value, label, icon?, subtitle?, group? }` objects. A `group` key switches the panel to grouped sections. |
| placeholder | string | '' | Shown when nothing is selected. |
| searchable | boolean | false | Show a search box inside the panel. |
| disabled | boolean | false | Disables the control. |
| size | string | 'md' | Control size. xssmmd |
| block | boolean | true | Full width. |
| ariaLabel | string | undefined | Accessible label. |
| loading | boolean | false | Show a spinner instead of the value. |
| loadingText | string | 'Loading...' | Text shown while loading. |
| spinner | string | 'mdi:loading' | MDI icon for the loading spinner. |
Eventos
| Evento | Datos | Descripción |
|---|---|---|
update:modelValue | string | number | boolean | Emitted when an option is chosen. |