StorybookGitHub

Combobox

An autocomplete input that filters a searchable list of options in a popover.

Installation 

npx shadcn-vue@latest add https://vuedocs.canceydejean.dev/r/combobox.json

Usage

Use combobox when a user needs to search a long list of options rather than scan a plain select. Built on reka-ui's Combobox; ComboboxCancel is also re-exported directly from reka-ui for clearing the current selection.

<script setup lang="ts">
import { Check } from "@lucide/vue";
import { ref } from "vue";
import {
  Combobox,
  ComboboxAnchor,
  ComboboxEmpty,
  ComboboxGroup,
  ComboboxInput,
  ComboboxItem,
  ComboboxItemIndicator,
  ComboboxList,
  ComboboxViewport,
} from "@/components/ui/combobox";

const frameworks = ["Next.js", "SvelteKit", "Nuxt", "Remix", "Astro"];
const value = ref("");
</script>

<template>
  <Combobox v-model="value" class="w-[200px]">
    <ComboboxAnchor>
      <ComboboxInput placeholder="Search framework..." />
    </ComboboxAnchor>
    <ComboboxList>
      <ComboboxViewport>
        <ComboboxEmpty>No framework found.</ComboboxEmpty>
        <ComboboxGroup>
          <ComboboxItem v-for="framework in frameworks" :key="framework" :value="framework">
            {{ framework }}
            <ComboboxItemIndicator>
              <Check class="size-4" />
            </ComboboxItemIndicator>
          </ComboboxItem>
        </ComboboxGroup>
      </ComboboxViewport>
    </ComboboxList>
  </Combobox>
</template>