Select

Shows a select component.

Examples

Basic select

Code

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

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

Disabled

Code

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

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

Custom label

Code

<template>
  <Select 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>
  </Select>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Select } from '@/components/ui/select'

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