Combobox

Shows a combobox component.

Examples

Basic combobox

Code

<template>
  <Combobox v-model="value" :options="options" class="w-64" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Combobox } from '@/components/ui/combobox'

const value = ref(null)
const options = [
  {
    label: 'Red',
    value: 1
  },
  {
    label: 'Green',
    value: 2
  },
  {
    label: 'Blue',
    value: 3
  }
]
</script>

Disabled combobox

Code

<template>
  <Combobox
    v-model="value"
    :options="options"
    class="w-64"
    disabled
  />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Combobox } from '@/components/ui/combobox'

const value = ref(null)
const options = [
  {
    label: 'Red',
    value: 'red'
  },
  {
    label: 'Green',
    value: 'green'
  },
  {
    label: 'Blue',
    value: 'blue'
  }
]
</script>

Combobox with custom label

Code

<template>
  <Combobox v-model="value" :options="options" class="w-64">
    <template v-if="value" #label="{ option }">
      <span class="flex items-center">
        <span class="size-3 mr-2 inline-block rounded-full opacity-40" :style="{ backgroundColor: option.value }" /> {{ option.label }}
      </span>
    </template>
    <template #option="{ option }">
      <span class="flex items-center">
        <span class="size-3 mr-2 inline-block rounded-full opacity-40" :style="{ backgroundColor: option.value }" /> {{ option.label }}
      </span>
    </template>
  </Combobox>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Combobox } from '@/components/ui/combobox'

const value = ref(null)
const options = [
  {
    label: 'Red',
    value: 'red'
  },
  {
    label: 'Green',
    value: 'green'
  },
  {
    label: 'Blue',
    value: 'blue'
  }
]
</script>

Combobox with async data

Code

<template>
  <Combobox
    v-model="value"
    :options="options"
    :loading="loading"
    disable-filter
    class="w-64"
    @update:search-term="search"
  />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Combobox } from '@/components/ui/combobox'

const value = ref(null)
const loading = ref(false)
const options = ref([])

const search = (value: string) => {
  console.log(`Imitating a search with ${value}`)

  loading.value = true
  return new Promise((resolve) => {
    setTimeout(() => {
      const result = value
        ? [
          {
            label: 'Red',
            value: 'red'
          },
          {
            label: 'Green',
            value: 'green'
          },
          {
            label: 'Blue',
            value: 'blue'
          }
        ]
        : []

      options.value = result
      loading.value = false
      resolve(result)
    }, 1000)
  })
}
</script>

Combobox with multiple values

Code

<template>
  <Combobox
    v-model="value"
    multiple
    :options="options"
    class="w-64"
  />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Combobox } from '@/components/ui/combobox'

const value = ref([])
const options = [
  {
    label: 'Red',
    value: 1
  },
  {
    label: 'Green',
    value: 2
  },
  {
    label: 'Blue',
    value: 3
  }
]
</script>