KMultiSelect

示例

Multi Select

Vue

Selected: vue

Searchable

A multi-select dropdown that allows selecting multiple options from a list.

Props

Name	Type	Default	Description
modelValue	string[]	[]	Array of currently selected option values.
options	Array<{ value: string; label: string }>	— (required)	Available options to choose from.
placeholder	string	'Select...'	Placeholder text when no options are selected.
searchable	boolean	false	Whether to show a search input for filtering options.
maxSelections	number	—	Maximum number of selectable items.

Emits

Name	Parameters	Description
update:modelValue	string[]	Emitted when the selection changes.

Slots

Name	Description
—	This component does not provide slots.

Basic Usage

<script setup>
import { ref } from 'vue'
import { KMultiSelect } from '@kK-2004/ui-component'

const selected = ref([])
const options = [
  { value: 'vue', label: 'Vue' },
  { value: 'react', label: 'React' },
  { value: 'svelte', label: 'Svelte' },
]
</script>

<template>
  <KMultiSelect v-model="selected" :options="options" searchable />
</template>