A chip-style multi-tag text input with paste-to-split, dedupe, a validation hook, and a max-tag limit, built from composable compound parts.
"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 "a, b, c" to split
</p>
</Field>
</div>
);
}