ComboBoxInput.vue

<script setup lang="ts">
import { cn } from "@/lib/utils";
import { Check, ChevronsUpDown } from "lucide-vue-next";
import { useField } from "vee-validate";
const {
  name,
  placeholder = "Choose an option...",
  disabled,
  options = [],
} = defineProps<{
  name: string;
  label: string;
  options: { label: string; value: any }[];
  placeholder?: string;
  disabled?: boolean;
}>();

const { value } = useField(name);
const model = defineModel({
  get: () => {
    if (value.value) {
      return options.find((option) => option.value === value.value);
    }
  }
})
</script>
<template>
  <FormField :name v-slot="{ handleChange }">
    <FormItem>
      <FormLabel>{{ label }}</FormLabel>
      <Combobox by="label" v-model="model" :disabled>
        <FormControl>
          <ComboboxAnchor class="w-full">
            <div class="relative w-full items-center">
              <ComboboxInput
                :display-value="(val) => val?.label ?? ''"
                :placeholder
              />
              <ComboboxTrigger
                class="absolute end-0 inset-y-0 flex items-center justify-center px-3"
              >
                <ChevronsUpDown class="size-4 text-muted-foreground" />
              </ComboboxTrigger>
            </div>
          </ComboboxAnchor>
        </FormControl>

        <ComboboxList class="w-full">
          <ComboboxEmpty> Nothing found. </ComboboxEmpty>

          <ComboboxGroup>
            <ComboboxItem
              v-for="option in options"
              :key="option.value"
              :value="option"
              @select="handleChange(option.value);"
            >
              {{ option.label }}

              <ComboboxItemIndicator>
                <Check :class="cn('ml-auto h-4 w-4')" />
              </ComboboxItemIndicator>
            </ComboboxItem>
          </ComboboxGroup>
        </ComboboxList>
      </Combobox>
      <FormDescription />
      <FormMessage />
    </FormItem>
  </FormField>
</template>