components/SelectField.vue

Reusable Vue select dropdown with items, label, and value handling

<!--
  Source: https://github.com/chakra-ui/panda | License: MIT | Copyright 2023 Chakra Systems Inc
  Provided via justclaw.it.com; keep this notice with the code.
-->
<script setup lang="ts">
import { computed } from 'vue'
import { Select, createListCollection } from '@ark-ui/vue/select'
import { select } from 'styled-system/recipes'

const props = defineProps<{
  label: string
  items: { label: string; value: string }[]
  value: string
  compact?: boolean
}>()
const emit = defineEmits<{ change: [value: string] }>()

const classes = computed(() => select({ compact: props.compact }))
const collection = computed(() => createListCollection({ items: props.items }))
</script>

<template>
  <Select.Root
    :class="classes.root"
    :collection="collection"
    :model-value="[value]"
    :posi

... (truncated -- full source via MCP)