Tag Input

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

export default function Example() {
  return <TagInput />;
}

"use client";

import { forwardRef, useState } from "react";
import { cn } from "@/lib/utils";

const TagInput = forwardRef(({ className, value = [], onValueChange, placeholder = "Add tag...", ...props }, ref) => {
  const [input, setInput] = useState("");

  const addTag = (tag) => {
    const trimmed = tag.trim();
    if (trimmed && !value.includes(trimmed)) {
      onValueChange?.([...value, trimmed]);
    }
    setInput("");
  };

  const removeTag = (tag) => onValueChange?.(value.filter((t) => t !== tag));

  const handleKeyDown = (e) => {
    if (e.key === "Enter") { e.preventDefault(); addTag(input); }
    if (e.key === "Backspace" && !input && value.length) removeTag(value[value.length - 1]);
  };

  return (
    <div ref={ref} className={cn("flex flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent px-3 py-1.5 text-sm shadow-sm focus-within:ring-1 focus-within:ring-ring", className)} {...props}>
      {value.map((tag) => (
        <span key={tag} className="inline-flex items-center gap-1 rounded-md bg-secondary px-2 py-0.5 text-xs font-medium">
          {tag}
          <button type="button" onClick={() => removeTag(tag)} className="hover:text-destructive cursor-pointer">×</button>
        </span>
      ))}
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        onKeyDown={handleKeyDown}
        placeholder={value.length === 0 ? placeholder : ""}
        className="flex-1 min-w-[80px] bg-transparent outline-none placeholder:text-muted-foreground"
      />
    </div>
  );
});
TagInput.displayName = "TagInput";

export { TagInput };