combobox-with-tags.vue

<script setup lang="ts">
import { computed, ref, watch } from "vue";
import {
  ComboboxInput,
  ComboboxRoot,
  useFilter,
} from "reka-ui";
import { Icon } from "@iconify/vue";

const { contains } = useFilter({ sensitivity: "base" });

const query = ref("");
const values = ref(["Apple"]);
const options = ["Apple", "Banana", "Blueberry", "Grapes", "Pineapple"];

const filteredOptions = computed(() =>
  options.filter(
    (option) => contains(option, query.value) && !values.value.includes(option)
  )
);

watch(
  values,
  () => {
    query.value = "";
  },
  { deep: true }
);
</script>

<template>
  <ComboboxRoot
    v-model="values"
    multiple
    ignore-filter
    class="my-4 mx-auto relative"
  >
    <ComboboxAnchor class="w-[400px]">
      <TagsInput v-model="values" delimiter="">
        <TagsInputItem v-for="item in values" :key="item" :value="item">
          <TagsInputItemText class="text-sm" />
          <TagsInputItemDelete>
            <Icon icon="lucide:x" />
          </TagsInputItemDelete>
        </TagsInputItem>
        <ComboboxInput v-model="query" as-child>
          <TagsInputInput placeholder="Fruits..." @keydown.enter.prevent />
        </ComboboxInput>
        <ComboboxTrigger>
          <Icon icon="radix-icons:chevron-down" class="h-4 w-4 text-primary" />
        </ComboboxTrigger>
      </TagsInput>
    </ComboboxAnchor>

    <ComboboxList>
      <ComboboxEmpty>No options</ComboboxEmpty>
      <ComboboxGroup v-if="filteredOptions.length" heading="Fruits">
        <ComboboxItem
          v-for="(option, index) in filteredOptions"
          :key="index"
          :value="option"
        >
          <!-- <ComboboxItemIndicator
              class="absolute left-0 w-[25px] inline-flex items-center justify-center"
            >
              <Icon icon="radix-icons:check" />
            </ComboboxItemIndicator> -->
          <span>
            {{ option }}
          </span>
        </ComboboxItem>
      </ComboboxGroup>
    </ComboboxList>
  </ComboboxRoot>
</template>