컴포넌트
InputTags
Enter로 태그 칩을 추가하고 X 버튼이나 Backspace로 제거하는 태그 입력 컴포넌트로, 칩마다 브랜드 컬러를 순환 배정하고 추가 시 팝 애니메이션·중복 거부 시 흔들림 피드백을 제공한다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/InputTags-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| defaultTags | string[] | ["보라", "핑크", "민트"] | 초기에 표시될 태그 라벨 목록 (비제어 기본값) |
| placeholder | string | "태그 입력 후 Enter" | 입력 필드의 placeholder 텍스트 |
| maxTags | number | 10 | 허용할 최대 태그 개수 (0 이하면 무제한) |
| allowDuplicates | boolean | false | 동일 라벨 태그의 중복 추가 허용 여부 |
| onTagsChange | (tags: string[]) => void | undefined | 태그 목록이 바뀔 때 활성 라벨 배열을 전달하는 콜백 |