Vue Searchable Select and Combobox

Playground

Custom item playground

Demo

Vue

The input displays the label, while v-model receives the option value.

Selected value: —

PickFruit.vuevue

Install

npm install @getdom/studio

vue

<script setup>
import '@getdom/studio/style.css';
import { DomCombobox } from '@getdom/studio';
import { ref } from 'vue';
const value = ref('');
const options = [
	{ value: '1', label: 'Apple' },
	{ value: '2', label: 'Banana' },
	{ value: '3', label: 'Cherry' },
];
</script>

<template>
	<div class="flex w-full max-w-sm flex-col gap-2">
		<DomCombobox v-model="value" :options="options" placeholder="Pick a fruit" class="w-full" />
		<p class="text-xs text-muted-fg">Selected value: <code class="text-canvas-fg">{{ value || '—' }}</code></p>
	</div>
</template>

Demo

Custom item markup

Type ob to highlight Steve Obrien and Robin. The item slot uses query and escaped text segments inside mark elements; literal <Ops> text never becomes HTML.

Demo

Server-loaded options

@query lets the parent fetch options and pass the current server results back through options.

Assign owner

A real HTTP endpoint returns 12 of 602 synthetic contacts at a time.

0 of 0 results loaded. Scroll for more; search resets the pages.

Value: None

ServerLoadedPeople.vuevue

Install

npm install @getdom/studio

vue

<script setup>
import '@getdom/studio/style.css';
import { ref } from 'vue';
import { DomCombobox } from '@getdom/studio';
import { usePagedLookup } from '../../_shared/usePagedLookup.js';
import LookupStatus from '../../_shared/LookupStatus.vue';

const value = ref('');
const { options, loading, hasMore, error, total, search, loadMore } = usePagedLookup('people');
</script>

<template>
	<div class="grid w-full max-w-md gap-3">
		<DomCombobox
			v-model="value"
			:options="options"
			:loading="loading"
			:has-more="hasMore"
			:filter-options="false"
			label="Assign owner"
			description="A real HTTP endpoint returns 12 of 602 synthetic contacts at a time."
			placeholder="Search or browse people"
			@query="search"
			@load-more="loadMore"
		>
			<template #item="{ item }">
				<span class="block truncate font-medium">{{ item.label }}</span>
				<span class="block truncate text-xs text-muted-fg">{{ item.email }} · {{ item.role }}</span>
			</template>
		</DomCombobox>
		<LookupStatus :error="error" :count="options.length" :total="total" @retry="loadMore" />
		<p class="text-xs text-muted-fg">Value: <code>{{ value || 'None' }}</code></p>
	</div>
</template>

Usage

Plain HTML

Use the headless custom element when you want the same combobox behaviour in plain HTML or another framework. The headless page includes copyable DOM-defined list examples.

View headless combobox

Behaviour

Selection, search and remote pages

A selected value is not a search filter. Opening shows the loaded options and a checkmark on matching selections. Only typing filters; custom item/option slots receive query and selected.

Set :filter-options="false" for server-ranked results. Handle @query to reset the cursor and replace options, then @load-more to append the next page. Pass loading and hasMore. Scrolling, keyboard navigation at the last row, and the Load more button request another page.

The examples call /api/form-options, a real HTTP endpoint serving synthetic records. The shared example loader debounces queries, aborts old requests, ignores stale responses, deduplicates pages and exposes a Retry button. Applications own their endpoint, authorization and cursor protocol; the controls do not fetch data themselves.

Selected labels are retained when a page is replaced. For Select, Combobox and Tag combobox, selectedOptions can supply initial records that are not loaded yet. Autocomplete stores the label as free text. Select opens near the selected row when it is loaded; a remote selection on a later page requires an application-owned lookup or seek endpoint. Multi-select opens at the beginning.

Props

Name	Type	Default	Description
v-model	string	—	Selected option value.
options	Array<{ value, label }> \| string[]	—	Available options.
placeholder	string	'Search…'	Input placeholder.
floatingMode	'viewport' \| 'anchor'	'viewport'	Choose whether the list stays in the browser or follows the input while scrolling.
clearable	boolean	true	Show an inline clear button when an option is selected.
loading	boolean	false	Show an inline spinner while async options are being fetched.
filterOptions	boolean	true	Set false for server-filtered or server-ranked options.
hasMore	boolean	false	Enable incremental scrolling, keyboard paging and the Load more button through @load-more.
selectedOptions	DomOption[]	[]	Resolved initial selected records outside the currently loaded page.

Keyboard

↑ / ↓Move active option.
EnterCommit active option.
EscClose the list.
TypeFilter the list live.