{
  "name": "tags-input-validation-demo",
  "type": "registry:example",
  "dependencies": [
    "@diceui/tags-input"
  ],
  "registryDependencies": [
    "button",
    "tags-input"
  ],
  "files": [
    {
      "path": "examples/tags-input-validation-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { toast } from \"sonner\";\n\nimport {\n  TagsInput,\n  TagsInputInput,\n  TagsInputItem,\n  TagsInputLabel,\n  TagsInputList,\n} from \"@/registry/bases/radix/ui/tags-input\";\n\nexport default function TagsInputValidationDemo() {\n  const [tricks, setTricks] = React.useState<string[]>([]);\n\n  return (\n    <TagsInput\n      value={tricks}\n      onValueChange={setTricks}\n      onValidate={(value) => value.length > 2 && !value.includes(\"ollie\")}\n      onInvalid={(value) =>\n        tricks.length >= 6\n          ? toast.error(\"Up to 6 tricks are allowed.\")\n          : tricks.includes(value)\n            ? toast.error(`${value} already exists.`)\n            : toast.error(`${value} is not a valid trick.`)\n      }\n      max={6}\n      editable\n      addOnPaste\n    >\n      <TagsInputLabel>Tricks</TagsInputLabel>\n      <TagsInputList>\n        {tricks.map((trick) => (\n          <TagsInputItem key={trick} value={trick}>\n            {trick}\n          </TagsInputItem>\n        ))}\n        <TagsInputInput placeholder=\"Add trick...\" />\n      </TagsInputList>\n      <div className=\"text-sm text-muted-foreground\">\n        Add up to 6 tricks with at least 3 characters, excluding \"ollie\".\n      </div>\n    </TagsInput>\n  );\n}\n",
      "target": ""
    }
  ]
}