Tag Input

Forms 81

About

Here is tag input component

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

// demo.tsx
import * as React from "react";
import TagInput, { type Tag } from "@/components/ui/tag-input";

const TagInputDemo = () => {
  const TAGS: Tag[] = [
    { id: "docker", label: "Docker" },
    { id: "kubernetes", label: "Kubernetes" },
    { id: "aws", label: "AWS" },
    { id: "graphql", label: "GraphQL" },
    { id: "mongodb", label: "MongoDB" },
    { id: "postgresql", label: "PostgreSQL" },
    { id: "redis", label: "Redis" },
    { id: "git", label: "Git" },
    { id: "webpack", label: "Webpack" },
    { id: "vite", label: "Vite" },
    { id: "cypress", label: "Cypress" },
    { id: "storybook", label: "Storybook" },
    { id: "tailwind", label: "Tailwind" },
    { id: "prisma", label: "Prisma" },
    { id: "nginx", label: "Nginx" },
  ];
  const [selectedTags, setSelectedTags] = React.useState<Tag[]>([]);

  return (
    <div className="relative w-full min-h-[450px] flex items-start md:items-center justify-center px-4 py-10">
      <TagInput
        options={TAGS}
        value={selectedTags}
        onChange={setSelectedTags}
        className="p-6 max-w-lg w-full flex flex-col"
      />
    </div>
  );
};

export { TagInputDemo as DemoOne };