TagInput 태그 입력 박스

원문 보기 위키 갱신 2026.10.11

태그를 입력하는 컴포넌트예요.

출처: 문서

본문

태그 입력 컴포넌트예요.

언제 사용하나요?

사용자가 여러 개의 태그를 입력해야 할 때 사용해요.

기본 사용법

:::demo


<template>
  <d-tag-input
    v-model="state.tags"
    v-model:suggestionList="state.suggestionList"
    displayProperty="name"
    placeholder="Add a tag"
    no-data="暂无数据"
    :minLength="1"
    :caseSensitivity="true"
    @change="changeValue"
    @update:tags="changeTags"
    @update:suggestionList="changeSuggestionList"
  ></d-tag-input>
</template>
<script>
import { defineComponent, reactive } from 'vue'

export default defineComponent({
  setup() {
    const state = reactive({
      tags: [{ name: "123" }],
      suggestionList: [{ name: "item1" }, { name: "item2" }, { name: "item3" }, { name: "item4" }]
    })
    const changeTags = (val) => {
      console.log(val)
    }
    const changeSuggestionList = (val) => {
      console.log(val)
    }
    const changeValue = (val) => {
      console.log(val)
    }

    return {
      state,
      changeTags,
      changeSuggestionList,
      changeValue
    }
  }
})
</script>

:::

disabled

:::demo


<template>
  <d-tag-input
    v-model="state.tags"
    v-model:suggestionList="state.suggestionList"
    :disabled="true"
  ></d-tag-input>
</template>
<script>
import { defineComponent, reactive } from 'vue'

export default defineComponent({
  setup() {
    const state = reactive({
      tags: [{ name: "123" }],
      suggestionList: [
        { name: "item1" },
        { name: "item2" },
        { name: "item3" },
        { name: "item4" },
        { name: "item5" },
        { name: "item6" }
      ]
    })

    return {
      state
    }
  }
})
</script>

:::

태그 최소 길이 & 최대 태그 수

:::demo


<template>
  <d-tag-input
    v-model="state.tags"
    v-model:suggestionList="state.suggestionList"
    :minLength="3"
    :maxTags="5"
  ></d-tag-input>
</template>
<script>
import { defineComponent, reactive } from 'vue'

export default defineComponent({
  setup() {
    const state = reactive({
      tags: [{ name: "item1" }],
      suggestionList: [
        { name: "item2" },
        { name: "item3" },
        { name: "item4" },
        { name: "item5" },
        { name: "item6" }
      ]
    })

    return {
      state
    }
  }
})
</script>

:::

TagInput 파라미터

파라미터	타입	기본값	설명	Demo 링크
v-model	`Array`	[]	필수, 입력된 태그와 선택된 태그 목록을 기록해요	기본 사용법
suggestionList	`Array`	[]	선택, 드롭다운 옵션. 기본으로 선택할 수 있는 태그 목록이에요	기본 사용법
displayProperty	`string`	'name'	선택, 목록 항목이 사용할 속성명	기본 사용법
placeholder	`string`	''	선택, 입력 박스의 placeholder	기본 사용법
noData	`string`	'데이터 없음'	선택, 데이터가 없을 때의 안내	기본 사용법
maxTags	`number`	Number.MAX_SAFE_INTEGER	선택, 입력할 수 있는 태그의 최대 개수	태그 최소 길이 & 최대 태그 수
minLength	`number`	`3`	선택, 입력할 수 있는 태그의 최대 개수	태그 최소 길이 & 최대 태그 수
maxLength	`number`	Number.MAX_SAFE_INTEGER	선택, 입력할 수 있는 태그의 최대 개수	태그 최소 길이 & 최대 태그 수
caseSensitivity	`boolean`	false	선택, 대소문자 구분. 기본은 대소문자를 무시해요
spellcheck	`boolean`	true	선택, input 입력 박스의 맞춤법 검사를 켤지 여부
isAddBySpace	`boolean`	true	선택, 스페이스 키 입력으로 태그를 추가할지 여부
disabled	`boolean`	false	선택, disabled 흐림 상태	disabled

TagInput 이벤트

이벤트	설명	Demo 링크
change	어떤 옵션을 선택하면 이 함수가 호출돼요. 파라미터는 현재 선택 항목의 값이에요	기본 사용법
update:suggestionList	옵션 데이터가 바뀌면 새로 선택 가능한 태그 목록을 반환해요	기본 사용법

더 알아보기 (Learn more)

d-tag-input은 이메일 수신인, 스킬 태그처럼 여러 값을 칩 형태로 담는 입력창이에요. suggestionList와 v-model:suggestionList를 함께 쓰면 후보 자동완성 목록을 양방향으로 관리할 수 있어요.