컴포넌트
Chip List
입력해 추가하고 X로 제거하는 태그 칩 입력 컴포넌트. Enter(또는 쉼표)로 칩을 추가하고, 빈 입력에서 Backspace로 마지막 칩을 삭제한다. 칩마다 등장(스프링 팝인)과 제거(축소 페이드아웃) 애니메이션이 적용되며, 중복 방지·최대 개수 제한·onChange 콜백을 지원한다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/ChipList-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| defaultItems | string[] | ["디자인", "개발", "브랜딩"] | 초기에 표시될 칩 라벨 목록 |
| placeholder | string | "태그 입력 후 Enter" | 입력 필드의 placeholder 텍스트 |
| maxItems | number | 12 | 최대 칩 개수 (0 이하면 무제한) |
| allowDuplicates | boolean | false | 중복 라벨 추가 허용 여부 |
| onChange | (items: string[]) => void | undefined | 칩 목록이 변경될 때마다 활성 칩 라벨 배열과 함께 호출되는 콜백 |