Combobox

A searchable dropdown for choosing one or more values from a list.

<template>
  <Combobox :items="[{ value: 'a', label: 'Apple' }]" model-value="a" placeholder="Fruits" />
</template>

Props

Name	Type	Default
items	({ type: 'label'; label: string } \| { value: string; label: string; description?: string; icon?: string; sublabel?: string; disabled?: boolean })[]	—
placeholder	string	'Select something'
searchPlaceholder	string	—
icon	string	—
multiple	boolean	false
size	'md' \| 'sm' \| 'xs'	'md'
modelValue	string \| string[]	—

Usage

Examples

Multiple select

Selecting more than one item, with search to narrow a long list.

<template>
  <Combobox
    v-model="selected"
    :items="[
      { value: 'apple', label: 'Apple' },
      { value: 'banana', label: 'Banana' },
      { value: 'blueberry', label: 'Blueberry' },
      { value: 'grapes', label: 'Grapes' },
      { value: 'pineapple', label: 'Pineapple' },
    ]"
    multiple
    placeholder="Fruits"
  />
</template>

Sizes

The three trigger height steps — xs, sm, and md.

<template>
  <Combobox v-model="selected" :items="items" size="xs" placeholder="Fruits" />
  <Combobox v-model="selected" :items="items" size="sm" placeholder="Fruits" />
  <Combobox v-model="selected" :items="items" size="md" placeholder="Fruits" />
</template>

Multiple select sizes

The count badge checked at every trigger size, not just the default.

<template>
  <Combobox v-model="selected" :items="items" multiple size="xs" placeholder="Fruits" />
  <Combobox v-model="selected" :items="items" multiple size="sm" placeholder="Fruits" />
  <Combobox v-model="selected" :items="items" multiple size="md" placeholder="Fruits" />
</template>