Tag Input

Component 3

About

Chip input with paste-to-split, dedupe, validation hook and max tags.

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 * as React from "react";

import { Field, FieldLabel } from "@/components/ui/field";
import {
  TagInput,
  TagInputContainer,
  TagInputError,
  TagInputField,
  TagInputTag,
} from "@/components/ui/tag-input";

export default function TagInputDemo() {
  const [tags, setTags] = React.useState<string[]>(["typescript", "react"]);

  return (
    <div className="flex min-h-[300px] w-full items-center justify-center p-8">
      <Field className="max-w-md gap-2">
        <FieldLabel htmlFor="tags-field">Tags · max 6</FieldLabel>
        <TagInput value={tags} onValueChange={setTags} maxTags={6}>
          <TagInputContainer>
            {tags.map((_, i) => (
              <TagInputTag key={i} index={i} />
            ))}
            <TagInputField
              id="tags-field"
              placeholder="Enter, comma, or paste to split"
            />
          </TagInputContainer>
          <TagInputError className="mt-1" />
        </TagInput>
        <p className="text-xs uppercase text-muted-foreground">
          {tags.length} / 6 · paste &quot;a, b, c&quot; to split
        </p>
      </Field>
    </div>
  );
}