Select

Display a select element.

Usage

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

<script lang="ts" setup>
const selectItems = ref([
  { name: 'Wow', value: 'Cool', disabled: false },
  { name: 'Sick', value: 'Lool', disabled: true },
  { name: 'Lol', value: 'Rofl', disabled: false },
])

const selectedVal = ref()
</script>

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

Float

The component utilises @headlessui-float/vue for floating. For the moment only the placement, offset and strategy props are hoisted. The default strategy for the dropdown is absolute, you can however change this to fixed as seen below.

<script lang="ts" setup>
const selectItems = ref([
  { name: 'Wow', value: 'Cool', disabled: false },
  { name: 'Sick', value: 'Lool', disabled: true },
  { name: 'Lol', value: 'Rofl', disabled: false },
])

const selectedVal = ref()
</script>

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

Active styles

The SelectItem has a group class that allows us to style based on the parents state. We also apply an .active class when the item is selected, meaning we can use this with group modifiers to apply custom active styling.

group-[.active]:text-canvas-100

The #default slot passes through the reactive active state. You can also use this for custom active styling or logic.

Props

Select

modelValuerequired
any
placement
Placement
"bottom-start"
"top""left""bottom""right""bottom-end""top-end""top-start""left-end""left-start""bottom-start""right-end""right-start"
strategy
Strategy
"absolute"
"fixed""absolute"
offset
number
4
name
string
placeholder
string
label
string
id
string
errors
string[]
options
any[]
valueKey
string
disabled
boolean
loading
boolean
required
boolean
useIndex
boolean

SelectItem

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