<script setup lang="ts">
import { Select, createListCollection } from '@ark-ui/vue/select'
import { ChevronsUpDownIcon } from 'lucide-vue-next'
import { data } from './data'

interface Pokemon {
  name: string
  url: string
}

const items = ref<Pokemon[]>([])

const collection = computed(() =>
  createListCollection({
    items: items.value,
    itemToValue: (item) => item.name,
    itemToString: (item) => item.name,
  }),
)

const fetchData = () => {
  setTimeout(() => {
    items.value = data.results
  }, 200)
}
fetchData()
</script>

<template>
  <Select.Root :collection="collection">
    <Select.Label>Framework</Select.Label>
    <Select.Control>
      <Select.Trigger>
        <Select.ValueText placeholder="Select a Framework" />
        <Select.Indicator>
          <ChevronsUpDownIcon />
        </Select.Indicator>
      </Select.Trigger>
      <Select.ClearTrigger>Clear</Select.ClearTrigger>
    </Select.Control>
    <Select.Positioner>
      <Select.Content>
        <Select.Item v-for="item in items" :key="item.url" :item="item">
          <Select.ItemText>{{ item.name }}</Select.ItemText>
          <Select.ItemIndicator>✓</Select.ItemIndicator>
        </Select.Item>
      </Select.Content>
    </Select.Positioner>
    <Select.HiddenSelect />
  </Select.Root>
</template>
Async Select

Components in this Example

Related Examples
