El Input Tag

InputTag Component

InputTag allows users to add content as tags with various customization options.

When to Use

• Tag inputs
• Keyword entry
• Multi-value inputs
• Email/tag lists

Basic Usage

<template>
  <el-input-tag v-model="tags" placeholder="Press Enter to add tag" />
</template>

<script setup>
import { ref } from 'vue'

const tags = ref(['Tag 1', 'Tag 2'])
</script>

Custom Trigger

<template>
  <el-input-tag
    v-model="tags"
    trigger="Space"
    placeholder="Press Space to add tag"
  />
</template>

Maximum Tags

<template>
  <el-input-tag v-model="tags" :max="5" />
</template>

Collapse Tags

<template>
  <el-input-tag
    v-model="tags"
    collapse-tags
    collapse-tags-tooltip
  />
</template>

Draggable

<template>
  <el-input-tag v-model="tags" draggable />
</template>

Delimiter

<template>
  <el-input-tag v-model="tags" delimiter="," />
</template>

Custom Tag

<template>
  <el-input-tag v-model="tags">
    <template #tag="{ value, index }">
      <el-tag type="success">{{ value }}</el-tag>
    </template>
  </el-input-tag>
</template>

API Reference

Attributes

Events

Slots

Exposes

Best Practices

1. Use max to limit tag count
2. Use delimiter for comma-separated input
3. Use draggable for reordering