InputTag

Matches Arco InputTag with light bordered tags inside a filled input. See the Element Plus docs for props.

Basics & Disabled

Type a value and press Enter to add a tag; disabled prevents editing.

VueArco

VueArco

<script setup lang="ts">
import { ref } from 'vue'
const tags = ref(['Vue', 'Arco'])
</script>

<template>
  <el-input-tag v-model="tags" placeholder="Add a tag" style="width: 320px" />
  <el-input-tag :model-value="['Vue', 'Arco']" disabled style="width: 320px" />
</template>

Tag Styles

Arco has no equivalent tag-type or tag-effect; these use the theme's Tag styles.

VueArco

VueArco

<script setup lang="ts">
import { ref } from 'vue'
const primary = ref(['Vue', 'Arco'])
const dark = ref(['Vue', 'Arco'])
</script>

<template>
  <el-input-tag v-model="primary" tag-type="primary" style="width: 320px" />
  <el-input-tag v-model="dark" tag-effect="dark" style="width: 320px" />
</template>

Differences from Arco

• Close icons come from Element Plus; Arco has no tag-type or tag-effect configuration.