Examples

Interactive examples — pick one from the left, operate the live demo, then switch between vue, vanilla, and react to see the same feature across frameworks. The live demos run on @selkit/vue; all three share one @selkit/core state machine.

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>

Examples ​

Examples