Tag Input

Forms 77

About

A sophisticated tag input component with suggestions, autocomplete, and custom styling. Built with React and Tailwind CSS, supporting both light and dark themes. Features - Tag Management - Add/remove tags - Maximum tags limit - Custom tag colors - Default tags support - Tag suggestions - Interactive UI - Autocomplete dropdown - Keyboard navigation - Clear button for each tag - Custom tag styling - Smooth animations

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Tag Input to your project and fits it to your theme.

Code

How Tag Input is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

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

const DEMO_TAGS = [
  { id: "kokonut-ui", label: "KokonutUI", color: "bg-indigo-100 text-indigo-700 border border-indigo-200 dark:bg-indigo-900/30 dark:text-indigo-300 dark:border-indigo-700/30" },
];

const DEMO_SUGGESTIONS = [
  { id: "nextjs", label: "Next.js" },
  { id: "react", label: "React" },
  { id: "tailwind", label: "Tailwind" },
  { id: "typescript", label: "TypeScript" },
  { id: "shadcn", label: "shadcn/ui" },
];

export function TagInputDemo() {
  return (
    <div className="w-full max-w-2xl space-y-8">
      {/* Default */}
      <div className="space-y-2">
        <h3 className="text-sm font-medium">Default Tag Input</h3>
        <TagInput
          label="Tags"
          placeholder="Add tags..."
          defaultTags={DEMO_TAGS}
          suggestions={DEMO_SUGGESTIONS}
          onChange={(tags) => console.log('Tags updated:', tags)}
        />
      </div>

      {/* With Error */}
      <div className="space-y-2">
        <h3 className="text-sm font-medium">With Error</h3>
        <TagInput
          label="Tags"
          placeholder="Add tags..."
          defaultTags={DEMO_TAGS}
          suggestions={DEMO_SUGGESTIONS}
          error="Maximum 5 tags allowed"
        />
      </div>

      {/* With Custom Max Tags */}
      <div className="space-y-2">
        <h3 className="text-sm font-medium">Max 3 Tags</h3>
        <TagInput
          label="Tags"
          placeholder="Add tags..."
          defaultTags={DEMO_TAGS}
          suggestions={DEMO_SUGGESTIONS}
          maxTags={3}
        />
      </div>

      {/* Empty State */}
      <div className="space-y-2">
        <h3 className="text-sm font-medium">Empty State</h3>
        <TagInput
          label="Tags"
          placeholder="Add tags..."
          defaultTags={[]}
          suggestions={DEMO_SUGGESTIONS}
        />
      </div>

      {/* Custom Suggestions */}
      <div className="space-y-2">
        <h3 className="text-sm font-medium">Custom Categories</h3>
        <TagInput
          label="Categories"
          placeholder="Add categories..."
          defaultTags={[]}
          suggestions={[
            { id: "design", label: "Design", color: "bg-purple-50 text-purple-700 border border-purple-200 hover:border-purple-300 dark:bg-purple-900/30 dark:text-purple-300 dark:border-purple-700/30" },
            { id: "development", label: "Development", color: "bg-blue-50 text-blue-700 border border-blue-200 hover:border-blue-300 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-700/30" },
            { id: "marketing", label: "Marketing", color: "bg-green-50 text-green-700 border border-green-200 hover:border-green-300 dark:bg-green-900/30 dark:text-green-300 dark:border-green-700/30" },
          ]}
        />
      </div>
    </div>
  );
}