Tag Input

Chips input — Enter, comma or paste to add, Backspace to edit the last chip, validation, max count and suggestions.

4 files · 328 locdeps: clsx, tailwind-merge

Topics

reacttailwind

Enter, comma or paste a list. Backspace edits the last chip.

Invite by email

Validated, max 5.

Installation

With the shadcn CLI, pointing at this platform’s registry:

npx shadcn@latest add https://opusui.131199999.xyz/r/tag-input.json

Or offline, straight from your opus55 checkout (copies every file it needs):

node ../tailwind_component/opus55/scripts/add.mjs tag-input

import { TagInput } from "@/components/opus/ui/tag-input";

<TagInput value={tags} onValueChange={setTags} suggestions={topics} />

Prop	Type	Default	Description
value / defaultValue / onValueChange	string[]	—	Tags.
validate	(t) => boolean \| string	—	Reject with a message.
max	number	—	Max tags.
suggestions	string[]	—	Autocomplete list.
separators	string[]	["Enter", ",", "Tab"]	Commit keys.