{
  "name": "combobox-multiple-demo",
  "type": "registry:example",
  "registryDependencies": [
    "combobox"
  ],
  "files": [
    {
      "path": "examples/combobox-multiple-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport { ChevronDown } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {\n  Combobox,\n  ComboboxAnchor,\n  ComboboxBadgeItem,\n  ComboboxBadgeList,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxTrigger,\n} from \"@/registry/bases/radix/ui/combobox\";\n\nconst tricks = [\n  { label: \"Kickflip\", value: \"kickflip\" },\n  { label: \"Heelflip\", value: \"heelflip\" },\n  { label: \"Tre Flip\", value: \"tre-flip\" },\n  { label: \"FS 540\", value: \"fs-540\" },\n  { label: \"Casper flip 360 flip\", value: \"casper-flip-360-flip\" },\n  { label: \"Kickflip Backflip\", value: \"kickflip-backflip\" },\n  { label: \"360 Varial McTwist\", value: \"360-varial-mc-twist\" },\n  { label: \"The 900\", value: \"the-900\" },\n];\n\nexport default function ComboboxMultipleDemo() {\n  const [value, setValue] = React.useState<string[]>([]);\n\n  return (\n    <Combobox\n      value={value}\n      onValueChange={setValue}\n      className=\"w-[400px]\"\n      multiple\n      autoHighlight\n    >\n      <ComboboxLabel>Tricks</ComboboxLabel>\n      <ComboboxAnchor className=\"h-full min-h-10 flex-wrap px-3 py-2\">\n        <ComboboxBadgeList>\n          {value.map((item) => {\n            const option = tricks.find((trick) => trick.value === item);\n            if (!option) return null;\n\n            return (\n              <ComboboxBadgeItem key={item} value={item}>\n                {option.label}\n              </ComboboxBadgeItem>\n            );\n          })}\n        </ComboboxBadgeList>\n        <ComboboxInput\n          placeholder=\"Select tricks...\"\n          className=\"h-auto min-w-20 flex-1\"\n        />\n        <ComboboxTrigger className=\"absolute top-3 right-2\">\n          <ChevronDown className=\"h-4 w-4\" />\n        </ComboboxTrigger>\n      </ComboboxAnchor>\n      <ComboboxContent>\n        <ComboboxEmpty>No tricks found.</ComboboxEmpty>\n        {tricks.map((trick) => (\n          <ComboboxItem key={trick.value} value={trick.value}>\n            {trick.label}\n          </ComboboxItem>\n        ))}\n      </ComboboxContent>\n    </Combobox>\n  );\n}\n",
      "target": ""
    }
  ]
}