Tags Input

Tag inputs render tags inside an input, followed by an actual text input.

Examples

Default

Apple

Banana

<script setup>
import { ref } from 'vue'
import {
  TagsInput,
  TagsInputInput,
  TagsInputItem,
  TagsInputItemDelete,
  TagsInputItemText
} from '@empathyds/vue'

const modelValue = ref(['Apple', 'Banana'])
</script>

<template>
  <TagsInput v-model="modelValue">
    <TagsInputItem v-for="item in modelValue" :key="item" :value="item">
      <TagsInputItemText />
      <TagsInputItemDelete />
    </TagsInputItem>
    <TagsInputInput placeholder="Fruits..." />
  </TagsInput>
</template>

Props

TagsInput

Prop	Type	Default	Description
modelValue	string[]	-	The controlled value of the tags input.
defaultValue	string[]	-	The default value of the tags input.
addOnPaste	boolean	false	Whether to add a tag when pasting.
disabled	boolean	false	Whether the tags input is disabled.
name	string	-	The name of the tags input.
required	boolean	false	Whether the tags input is required.
dir	ltr | rtl	-	The reading direction of the tags input.
max	number	-	The maximum number of tags.
id	string	-	The id of the tags input.

Slots

TagsInput

Slot	Description
default	The content of the tags input.

TagsInputItem

Slot	Description
default	The content of the tag item.