Tag Input

Interactive tag input field with add/remove functionality.

Preview

Tag / Chip input

Use tags to classify content, filters, or metadata.

brutalgen-zcontrastlaunch

Installation

terminal
$
Other package managers
bunx --bun shadcn@latest add https://trents.tech/r/tag-input.json

Usage

tag-input-demo.tsx
import TagInput from "@/components/blocks/tag-input"

export default function TagInputDemo() {
  return (
    <TagInput
      // Update tag list and placeholder.
      title="Tag / Chip input"
      description="Use tags to classify content, filters, or metadata."
      tags={["brutal", "gen-z", "contrast", "launch"]}
      placeholder="Type a tag and press Enter"
    />
  )
}
0