範例

互動式範例——左側挑一個,主區直接操作 live demo,再切換 vue / vanilla / react 看同一功能在三個框架的寫法。live demo 跑在 @selkit/vue,三端共用同一顆 @selkit/core 狀態機。

Basics

Searching

Grouping

Tagging

Async

Performance

Layout

Customization

i18n

Theming

Basic select

單選、placeholder、清除鈕。預設搜尋框可輸入即時過濾。

<script setup lang="ts">
import { ref } from 'vue'
import { SelkitSelect } from '@selkit/vue'

const options = [
  { value: 'apple', label: 'Apple' },
  { value: 'banana', label: 'Banana' },
  { value: 'cherry', label: 'Cherry' },
  { value: 'date', label: 'Date' },
  { value: 'elderberry', label: 'Elderberry' },
]
const value = ref<string | null>(null)
</script>

<template>
  <SelkitSelect v-model="value" :options="options" placeholder="Pick a fruit" />
</template>