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

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