Combobox

Autocomplete input and command palette with a list of suggestions.

Examples

Default

<script setup>
import { ref } from 'vue'
import {
  Combobox,
  ComboboxAnchor,
  ComboboxEmpty,
  ComboboxGroup,
  ComboboxInput,
  ComboboxItem,
  ComboboxItemIndicator,
  ComboboxList,
  ComboboxTrigger,
  ComboboxViewport
} from '@empathyds/vue'

const frameworks = [
  { value: 'next.js', label: 'Next.js' },
  { value: 'sveltekit', label: 'SvelteKit' },
  { value: 'nuxt.js', label: 'Nuxt.js' },
  { value: 'remix', label: 'Remix' },
  { value: 'astro', label: 'Astro' },
]

const value = ref('')
</script>

<template>
  <Combobox v-model="value">
    <ComboboxAnchor class="relative">
      <ComboboxInput placeholder="Select framework..." />
      <ComboboxTrigger class="absolute inset-y-0 right-0 flex items-center px-2">
        <span class="text-muted-foreground text-xs">▼</span>
      </ComboboxTrigger>
    </ComboboxAnchor>
    <ComboboxList class="mt-1 w-full border rounded-md bg-popover text-popover-foreground shadow-md">
      <ComboboxViewport>
        <ComboboxEmpty class="py-2 text-center text-sm">No framework found.</ComboboxEmpty>
        <ComboboxGroup>
          <ComboboxItem
            v-for="framework in frameworks"
            :key="framework.value"
            :value="framework.value"
          >
            <ComboboxItemIndicator class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
              ✓
            </ComboboxItemIndicator>
            <span>{{ framework.label }}</span>
          </ComboboxItem>
        </ComboboxGroup>
      </ComboboxViewport>
    </ComboboxList>
  </Combobox>
</template>

Props

Combobox

Prop	Type	Default	Description
model-value	any	-	The verified value of the combobox
default-value	any	-	The default value of the combobox
open	boolean	false	Whether the combobox is open
default-open	boolean	false	The default open state
disabled	boolean	false	Whether the combobox is disabled
multiple	boolean	false	Whether to allow multiple selections

Events

Combobox

Event	Payload	Description
update:modelValue	any	Event handler called when the value changes.
update:open	boolean	Event handler called when the open state changes.
update:searchTerm	string	Event handler called when the search term changes.

Slots

Combobox

Slot	Description
default	The combobox content

ComboboxInput

Slot	Description
default	The input content

ComboboxTrigger

Slot	Description
default	The trigger content

ComboboxContent

Slot	Description
default	The content of the popover

ComboboxItem

Slot	Description
default	The item content