A combobox with a large list of options

<script setup lang="ts">
import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList } from "@/components/ui/combobox"
import { Field } from "@/components/ui/field"

const largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)
</script>

<template>
  <Field class="max-w-xs">
    <Combobox>
      <ComboboxInput placeholder="Search from 100 items" />
      <ComboboxContent>
        <ComboboxEmpty>No items found.</ComboboxEmpty>
        <ComboboxList>
          <ComboboxItem v-for="item in largeListItems" :key="item" :value="item">
            {{ item }}
          </ComboboxItem>
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  </Field>
</template>