KTagInput

示例

Tag Input (press Enter or comma to add)

Vue TypeScript

Tags: Vue, TypeScript

With max tags (3)

Tag 1

An input field for adding and removing text tags.

Props

Name	Type	Default	Description
modelValue	string[]	[]	The current list of tags.
placeholder	string	'Add tag...'	Placeholder text for the input field.
disabled	boolean	false	Whether the input is disabled.
maxTags	number	—	Maximum number of allowed tags.

Emits

Name	Parameters	Description
update:modelValue	string[]	Emitted when tags are added or removed.

Slots

Name	Description
—	This component does not provide slots.

Basic Usage

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

const tags = ref(['vue', 'typescript'])
</script>

<template>
  <KTagInput v-model="tags" placeholder="Add a tag..." :max-tags="5" />
</template>