Select

Display a select element.

You need to check for an undefined selected slot prop. Types are currently bugged.

Usage

Use the compositional components CSelect & CSelectItem to compose the select element.

<script lang="ts" setup>
const selectItems = [
  { name: 'Example 1', value: 1, disabled: false },
  { name: 'Example 2', value: 2, disabled: true },
  { name: 'Example 3', value: 3, disabled: false },
]

const selectedVal = ref<number>()
</script>

<template>
  <CSelect
    v-model="selectedVal"
    :options="selectItems"
    placeholder="Example select"
    by="value"
    label="Example select"
    class="min-w-50 w-auto"
  >
    <template #selected="{ selected }">
      {{ selected?.name }}
    </template>
    <template #default="{ items, selected }">
      <CSelectItem
        v-for="item in items"
        :key="item.name"
        :selected="item.value === selected?.value"
        :value="item.value"
        :disabled="item.disabled"
      >
        {{ item.name }}
      </CSelectItem>
    </template>
  </CSelect>
</template>

Compositional with empty slot

In some cases you want control over what the empty/placeholer state renders, for example, to mimic an 'Any' option.

<script lang="ts" setup>
const selectItems = [
  { name: 'Example 1', value: 1, disabled: false },
  { name: 'Example 2', value: 2, disabled: true },
  { name: 'Example 3', value: 3, disabled: false },
]

const selectedVal = ref<null | typeof selectItems[number]>(null)
</script>

<template>
  <CSelect
    v-model="selectedVal"
    placeholder="Example select"
    label="Example select"
    class="min-w-50 w-auto"
  >
    <template #selected>
      {{ selectedVal.name }}
    </template>
    <!-- This empty slot will render with any falsy model value -->
    <template #empty>
      Any data center
    </template>
    <CSelectItem
      :selected="selectedVal === null"
      :value="null"
    >
      Any data center
    </CSelectItem>
    <CSelectItem
      v-for="item in selectItems"
      :key="item.name"
      :selected="item.value === selectedVal?.value"
      :value="item"
      :disabled="item.disabled"
    >
      {{ item.name }}
    </CSelectItem>
  </CSelect>
</template>

Non-compositional

A non-compositional approach can be used with the component, using just props and internal handling to render the child components. The display-value prop can be used here to select the value you want to use to display.

You need to use display-value if providing options with an array of objects for non-compositional use as well as when you need slot values.

<script lang="ts" setup>
const selectItems = ref([
  { name: 'Example 1', value: 1, disabled: false },
  { name: 'Example 2', value: 2, disabled: true },
  { name: 'Example 3', value: 3, disabled: false },
])

const selectedVal = ref()
</script>

<template>
  <CSelect
    v-model="selectedVal"
    :options="selectItems"
    placeholder="Example select"
    by="value"
    display-value="name"
    label="Example select"
    class="min-w-50 w-auto"
  />
</template>

Props

Select

modelValuerequired
any
label
string
name
string
placeholder
string
content
Omit<SelectContentProps, "asChild" | "as" | "forceMount"> & Partial<EmitsToProps<SelectContentImplEmits>>
id
string
errors
string[]
portal
string | boolean | HTMLElement
true
by
string | number | symbol
options
any[] | { disabled?: boolean; }[]
displayValue
string | number | symbol
hint
string
disabled
boolean
loading
boolean
required
boolean
defaultOpen
boolean
false
open
boolean

SelectItem

value
string | number | object
undefined
icon
string
tags
any[]
disabled
boolean
selected
boolean