Tags Input

하나의 입력 필드에서 자유 형식 태그를 만들고 이동하고 지웁니다.

용법

기술 태그

입력 포커스를 유지하며 기술 태그를 만들거나 지웁니다.

VueDOMAccessibility

Press Enter or comma to add a tag.

<!-- Tags Input / Skills -->
<script setup lang="ts">
import { TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, TagsInputClear } from '@sectile/vue/tags-input'
import { Trash2, X } from '@lucide/vue'

</script>

<template>
  <TagsInputRoot :default-value="['Vue', 'DOM', 'Accessibility']" label="Project skills" v-slot="{ value }">
    <TagsInputItem v-for="(_, index) in value" :key="index" :index="index">
      <TagsInputItemText />
      <TagsInputItemDelete :aria-label="`Remove ${value[index]}`">
        <X aria-hidden="true" />
      </TagsInputItemDelete>
    </TagsInputItem>
    <TagsInputInput placeholder="Add a skill…" />
    <TagsInputClear><Trash2 aria-hidden="true" /> Clear all</TagsInputClear>
  </TagsInputRoot>
</template>

개수 제한

기존 값을 유지하면서 설정한 항목 수나 화면 표시 개수를 지킵니다.

VueDOMAccessibility

Press Enter or comma to add a tag.

<!-- Tags Input / Limited -->
<script setup lang="ts">
import { TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, TagsInputClear } from '@sectile/vue/tags-input'
import { Trash2, X } from '@lucide/vue'

</script>

<template>
  <TagsInputRoot :default-value="['Vue', 'DOM', 'Accessibility']" label="Project skills" v-slot="{ value }">
    <TagsInputItem v-for="(_, index) in value" :key="index" :index="index">
      <TagsInputItemText />
      <TagsInputItemDelete :aria-label="`Remove ${value[index]}`">
        <X aria-hidden="true" />
      </TagsInputItemDelete>
    </TagsInputItem>
    <TagsInputInput placeholder="Add a skill…" />
    <TagsInputClear><Trash2 aria-hidden="true" /> Clear all</TagsInputClear>
  </TagsInputRoot>
</template>

외부 상태 관리

현재 값은 부모가 관리하고, 허용된 변경을 컴포넌트에 다시 전달합니다.

VueDOMAccessibility

Press Enter or comma to add a tag.

<!-- Tags Input / Controlled -->
<script setup lang="ts">
import { TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, TagsInputClear } from '@sectile/vue/tags-input'
import { Trash2, X } from '@lucide/vue'

</script>

<template>
  <TagsInputRoot :default-value="['Vue', 'DOM', 'Accessibility']" label="Project skills" v-slot="{ value }">
    <TagsInputItem v-for="(_, index) in value" :key="index" :index="index">
      <TagsInputItemText />
      <TagsInputItemDelete :aria-label="`Remove ${value[index]}`">
        <X aria-hidden="true" />
      </TagsInputItemDelete>
    </TagsInputItem>
    <TagsInputInput placeholder="Add a skill…" />
    <TagsInputClear><Trash2 aria-hidden="true" /> Clear all</TagsInputClear>
  </TagsInputRoot>
</template>

API

Vue 패키지: @sectile/vue/tags-input

컴포넌트

TagsInputRoot
TagsInputItem
TagsInputItemText
TagsInputItemDelete
TagsInputInput
TagsInputClear

Props

`TagsInputRootProps`

as: 타입PrimitiveAs기본값'div'
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값false
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
defaultInputValue: 타입string기본값''
편집 입력에 처음 표시할 내부 관리 문자열입니다.
defaultValue: 타입readonly string[]기본값[]
컴포넌트가 값을 관리할 때 사용할 초깃값입니다.
disabled: 타입boolean기본값false
사용자 조작을 막을지 여부입니다.
form: 타입string기본값undefined
컨트롤을 연결할 네이티브 form 요소의 ID입니다.
inputValue: 타입string기본값undefined
편집 입력에 표시할 외부 제어 문자열입니다.
label: 타입string기본값'Tags'
보조 기술이 읽는 컨트롤 이름입니다.
modelValue: 타입readonly string[]기본값undefined
부모가 상태를 관리할 때 사용할 현재 값입니다.
name: 타입string기본값undefined
네이티브 폼 제출에 사용할 이름입니다.
policies: 타입TagsInputPolicies기본값undefined
검증, 이동, 선택 동작을 조정하는 정책입니다.
readonly: 타입boolean기본값false
값 확인만 허용하는 읽기 전용 상태 여부입니다.
required: 타입boolean기본값false
제출 전에 올바른 값이 반드시 있어야 하는지 여부입니다.

`TagsInputItemProps`

as: 타입PrimitiveAs기본값undefined
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값undefined
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
index: 타입number기본값필수
부모 컬렉션 안에서 이 파트의 0부터 시작하는 위치입니다.

`TagsInputPartProps`

as: 타입PrimitiveAs기본값파트별로 다름
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값false
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.

슬롯

`TagsInputRootSlotProps`

disabled: 타입boolean
사용자 조작을 막을지 여부입니다.
inputValue: 타입string
현재 편집 입력 문자열입니다.
readonly: 타입boolean
값 확인만 허용하는 읽기 전용 상태 여부입니다.
value: 타입readonly string[]
이 계약이 노출하는 현재 값입니다.

`TagsInputItemSlotProps`

disabled: 타입boolean
사용자 조작을 막을지 여부입니다.
index: 타입number
부모 컬렉션 안의 0부터 시작하는 위치입니다.
readonly: 타입boolean
값 확인만 허용하는 읽기 전용 상태 여부입니다.
value: 타입string
이 계약이 노출하는 현재 값입니다.

이벤트

`TagsInputRoot`

update:inputValue: 페이로드string
편집 입력 문자열이 바뀔 때 발생합니다.
update:modelValue: 페이로드readonly string[]
컴포넌트가 외부 제어 값의 변경을 요청할 때 발생합니다.

기타 타입

`TagsInputValueChangeHandler`

type TagsInputValueChangeHandler = (value: readonly string[]) => void

`TagsInputInputValueChangeHandler`

type TagsInputInputValueChangeHandler = (value: string) => void

파트

공통 범위: [data-scope="tags-input"]. 컴포넌트 내부로 스타일을 제한할 때 파트 선택자와 함께 사용합니다.

파트	선택자	역할	추가 속성
`root`	`[data-part="root"]`	컴포넌트 경계와 내부 파트를 묶습니다.	—
`item`	`[data-part="item"]`	선택하거나 실행할 수 있는 항목 하나입니다.	—
`item-text`	`[data-part="item-text"]`	항목 레이블을 조작부와 분리해 표시합니다.	—
`item-delete`	`[data-part="item-delete"]`	해당 항목을 제거합니다.	—
`input`	`[data-part="input"]`	편집 값이나 초안을 입력받습니다.	—
`clear`	`[data-part="clear"]`	현재 값이나 항목 모음을 비웁니다.	—

키보드 동작

키	동작
`Enter` / `Comma`	현재 입력을 태그로 확정합니다.
`Arrow Left` / `Arrow Right`	입력란과 기존 태그 사이를 이동합니다.
`Backspace` / `Delete`	커서 상태에 따라 현재 태그로 이동하거나 삭제합니다.

접근성

이름이 있는 묶음이 텍스트 입력을 기본 요소로 유지하고 각 태그 삭제 작업에 이름을 제공합니다.

Tags Input ​

용법 ​

기술 태그 ​

개수 제한 ​

외부 상태 관리 ​

API ​

Props ​

TagsInputRootProps ​

TagsInputItemProps ​

TagsInputPartProps ​

슬롯 ​

TagsInputRootSlotProps ​

TagsInputItemSlotProps ​

이벤트 ​

TagsInputRoot ​

기타 타입 ​

TagsInputValueChangeHandler ​

TagsInputInputValueChangeHandler ​

파트 ​

키보드 동작 ​

접근성 ​

Tags Input

용법

기술 태그

개수 제한

외부 상태 관리

API

Props

`TagsInputRootProps`

`TagsInputItemProps`

`TagsInputPartProps`

슬롯

`TagsInputRootSlotProps`

`TagsInputItemSlotProps`

이벤트

`TagsInputRoot`

기타 타입

`TagsInputValueChangeHandler`

`TagsInputInputValueChangeHandler`

파트

키보드 동작

접근성