Enter·콤마로 추가, Backspace로 삭제, 중복 방지와 추천 목록을 갖춘 태그 인풋.
한 줄 요약
하나의 입력 박스 안에 칩을 쌓는 태그 인풋 Enter콤마 추가, 빈 칸 Backspace로 마지막 삭제, 중복 방지, 추천 목록까지.
자유 입력 + 다중 선택을 한 필드에서 받아야 할 때 관심 태그, 메일 수신자, 필터 키워드 등.
Enter콤마 입력으로 trim 후 칩을 추가한다.
빈 입력에서 Backspace면 마지막 칩을 제거한다.
대소문자공백 무시로 중복을 막는다.
추천 목록은 입력에 맞춰 필터되고 /로 네비게이션한다.
최대 개수 도달 시 입력을 잠그고 카운터로 알린다.
한글 IME 조합 중 Enter 처리에 주의한다.
칩 삭제 버튼에 명확한 aria-label.
관심 기술/태그 선택
메일 받는 사람 입력
import type { Metadata } from "next";
import { TagInputDemo } from "./-components/TagInputDemo";
export const metadata: Metadata = {
title: "태그 입력 필드 (데모)",
description:
"Enter·콤마로 태그 추가, 빈 입력에서 Backspace로 마지막 태그 삭제, 칩 ×로 제거. 중복 방지(대소문자 무시)·최대 개수 제한·추천 목록(화살표 네비)을 갖춘 칩 인풋.",
robots: { index: false, follow: false },
};
export default function Page() {
return (
<main className="flex min-h-[100dvh] items-center justify-center bg-gradient-to-br from-slate-50 via-white to-indigo-50/40">
<TagInputDemo />
</main>
);
}