Combobox

Form

A searchable select with built-in filter. Ideal for long option lists.

Props

Prop	Type	Default	Description
`modelValue`	`string`	`undefined`	Selected value (v-model).
`options`	`DsComboboxOption[]`	`[]`	Options list { label, value, disabled? }.
`placeholder`	`string`	`"Select an option…"`	Placeholder text when nothing is selected.
`searchPlaceholder`	`string`	`"Search…"`	Placeholder for the search field.
`disabled`	`boolean`	`false`	Disable the component.
`clearable`	`boolean`	`false`	Show a button to clear the selection.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size of the component.

Examples

Searchable select

vue

<script setup>
const options = [
  { value: 'nuxt', label: 'Nuxt' },
  { value: 'vue', label: 'Vue' },
  { value: 'react', label: 'React' },
  { value: 'svelte', label: 'Svelte' },
  { value: 'angular', label: 'Angular' },
]
const selected = ref('')
</script>
<template>
  <DsCombobox
    v-model="selected"
    :options="options"
    placeholder="Select a framework…"
    :clearable="true"
  />
</template>

Skeleton

Use DsComboboxSkeleton as a loading placeholder while content is being fetched.

Default

vue

<DsComboboxSkeleton />

Accessibility

aria-haspopup="listbox" and aria-expanded are managed on the trigger.
Options have role="option" with aria-selected.
Keyboard navigation supported (Escape closes the list).

ColorPicker

DatePicker