Tag Input

Dynamic tag/chip input with validation, max limits, and comma-separated output.

Installation

pnpm dlx shadcn@latest add https://jb.desishub.com/r/tag-input.json

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

<TagInput
  initialValue="react, nextjs, typescript"
  onChange={(tags) => console.log(tags)}
  maxTags={5}
  maxTagLength={20}
/>

Prop	Type	Default	Description
`initialValue`	`string`	`""`	Initial tags as comma-separated.
`onChange`	`(value: string) => void`	-	Called with updated tag string.
`placeholder`	`string`	`"Add tags..."`	Input placeholder.
`maxTags`	`number`	-	Maximum number of tags.
`maxTagLength`	`number`	-	Max characters per tag.
`disabled`	`boolean`	`false`	Disable the input.