Components
Tag Input
An accessible tag/chip input field where users type and press Enter to add tags, with duplicate detection, a max limit, keyboard navigation and animated chips.
"use client";
import { TagInput } from "@/components/ui/tag-input";
const START = ["motion", "focus order"];
export function TagInputDemo() {
return (
<div className="mx-auto h-[150px] w-full max-w-[420px]">
<TagInput defaultValue={START} max={6} placeholder="Add a topic" />
</div>
);
}
export default TagInputDemo;
Dependencies
Source
Published
Similar components
Explore more
Part of interior.dev — browse the full library on 21st.dev.