TagInput

Input component for quickly adding tags with separators and Enter confirmation.

Basic Usage

Demo will load when visible.

<script setup lang="ts">
import { ref } from 'vue'

const tags = ref(['Design', 'Docs'])
</script>

<template>
  <TxTagInput v-model="tags" placeholder="Press Enter to add tags" />
</template>

API

TxTagInput Props

Name	Type	Default	Description
`modelValue`	`string[]`	`[]`	Tag list
`placeholder`	`string`	`'Add tag'`	Placeholder text
`disabled`	`boolean`	`false`	Disabled state
`max`	`number`	`20`	Max tag count
`allowDuplicates`	`boolean`	`false`	Allow duplicate tags
`separators`	`string[]`	`[',']`	Separator characters
`confirmOnBlur`	`boolean`	`true`	Confirm on blur

Events

Event	Payload	Description
`update:modelValue`	`(tags)`	Update tags
`change`	`(tags)`	Tags changed
`add`	`(tags)`	Tag added
`remove`	`(tag)`	Tag removed
`focus`	`(event)`	Focus event
`blur`	`(event)`	Blur event