"use client";

import * as React from "react";

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

export interface TagsInputProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
  value?: string[];
  onChange?: (tags: string[]) => void;
  placeholder?: string;
  maxTags?: number;
  allowDuplicates?: boolean;
  validateTag?: (tag: string) => string | null;
}

const RemoveIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" {...props}>
    <path
      d="M6 6l12 12M18 6l-12 12"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);

export const TagsInput = React.forwardRef<HTMLDivElement, TagsInputProps>(
  (
    {
      className,
      value,
      onChange,
      placeholder = "Add a tag",
      maxTags = 8,
      allowDuplicates = false,
      validateTag,
      ...props
    },
    ref
  ) => {
    const [internalTags, setInternalTags] = React.useState<string[]>([]);
    const [inputValue, setInputValue] = React.useState("");
    const [errorMessage, setErrorMessage] = React.useState<string | null>(null);

    const tags = value ?? internalTags;

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

    const validate = (tag: string) => {
      if (!tag.trim()) {
        return "Tag cannot be empty";
      }
      if (!allowDuplicates && tags.includes(tag)) {
        return "Tag already exists";
      }
      if (tags.length >= maxTags) {
        return `Limit of ${maxTags} tags reached`;
      }
      if (validateTag) {
        return validateTag(tag);
      }
      if (tag.length < 2) {
        return "Tag must be at least 2 characters";
      }
      return null;
    };

    const addTag = (rawTag: string) => {
      const trimmed = rawTag.trim();
      const error = validate(trimmed);
      if (error) {
        setErrorMessage(error);
        return;
      }
      updateTags([...tags, trimmed]);
      setInputValue("");
      setErrorMessage(null);
    };

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

    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
      if (event.key === "Enter" || event.key === ",") {
        event.preventDefault();
        addTag(inputValue);
      }
      if (event.key === "Backspace" && inputValue === "" && tags.length > 0) {
        removeTag(tags[tags.length - 1]);
      }
    };

    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-border bg-card px-3 py-2",
            "focus-within:bg-muted"
          )}
        >
          {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 transition hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                aria-label={`Remove ${tag}`}
              >
                <RemoveIcon className="h-3 w-3" />
              </button>
            </span>
          ))}
          <input
            value={inputValue}
            onChange={(event) => {
              setInputValue(event.target.value);
              setErrorMessage(null);
            }}
            onKeyDown={handleKeyDown}
            className="min-w-[140px] flex-1 bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground"
            placeholder={placeholder}
          />
        </div>
        <div className="mt-2 flex items-center justify-between text-xs text-muted-foreground">
          <span>{tags.length} of {maxTags} tags</span>
          {errorMessage ? (
            <span className="text-sm text-foreground">{errorMessage}</span>
          ) : null}
        </div>
      </div>
    );
  }
);

TagsInput.displayName = "TagsInput";
Tags Input

Dependencies

Files

Installation
