"use client";

import * as React from "react";

import { X } from "lucide-react";

import { cn } from "@/lib/utils";

export interface TagInputProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
  value?: string[];
  onChange?: (tags: string[]) => void;
  suggestions?: string[];
  placeholder?: string;
}

export const TagInput = React.forwardRef<HTMLDivElement, TagInputProps>(
  (
    {
      className,
      value,
      onChange,
      suggestions = [],
      placeholder = "Add a tag",
      ...props
    },
    ref
  ) => {
    const [inputValue, setInputValue] = React.useState("");
    const [internalTags, setInternalTags] = React.useState<string[]>([]);
    const [isFocused, setIsFocused] = React.useState(false);

    const tags = value ?? internalTags;

    const filteredSuggestions = suggestions.filter(
      (suggestion) =>
        suggestion.toLowerCase().includes(inputValue.toLowerCase()) &&
        !tags.includes(suggestion)
    );

    const updateTags = (nextTags: string[]) => {
      if (!value) {
        setInternalTags(nextTags);
      }
      onChange?.(nextTags);
    };

    const addTag = (tag: string) => {
      const trimmed = tag.trim();
      if (!trimmed || tags.includes(trimmed)) return;
      updateTags([...tags, trimmed]);
      setInputValue("");
    };

    const removeTag = (tag: string) => {
      updateTags(tags.filter((item) => item !== tag));
    };

    return (
      <div ref={ref} className={cn("w-full max-w-xl", className)} {...props}>
        <div
          className={cn(
            "flex flex-wrap items-center gap-2 rounded-lg border border-input bg-background px-3 py-2",
            "focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20"
          )}
        >
          {tags.map((tag) => (
            <span
              key={tag}
              className="flex items-center gap-1 rounded-full border border-border bg-muted px-2 py-1 text-xs font-medium text-foreground"
            >
              {tag}
              <button
                type="button"
                onClick={() => removeTag(tag)}
                className="text-muted-foreground hover:text-foreground"
              >
                <X className="h-3 w-3" />
              </button>
            </span>
          ))}
          <input
            value={inputValue}
            onChange={(event) => setInputValue(event.target.value)}
            onFocus={() => setIsFocused(true)}
            onBlur={() => setIsFocused(false)}
            onKeyDown={(event) => {
              if (event.key === "Enter" || event.key === ",") {
                event.preventDefault();
                addTag(inputValue);
              }
              if (event.key === "Backspace" && inputValue === "") {
                updateTags(tags.slice(0, -1));
              }
            }}
            className="min-w-[120px] flex-1 bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground"
            placeholder={placeholder}
          />
        </div>

        {isFocused && filteredSuggestions.length > 0 ? (
          <div className="mt-2 rounded-lg border border-border bg-popover p-2 shadow-lg">
            <p className="px-2 pb-1 text-xs font-semibold text-muted-foreground">
              Suggestions
            </p>
            <div className="max-h-40 overflow-y-auto">
              {filteredSuggestions.map((suggestion) => (
                <button
                  key={suggestion}
                  type="button"
                  className="flex w-full items-center justify-between rounded-md px-2 py-1.5 text-left text-sm text-foreground transition hover:bg-muted"
                  onMouseDown={(event) => event.preventDefault()}
                  onClick={() => addTag(suggestion)}
                >
                  {suggestion}
                </button>
              ))}
            </div>
          </div>
        ) : null}
      </div>
    );
  }
);

TagInput.displayName = "TagInput";
Tag Input

Dependencies

Files

Installation
