{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command-07",
  "title": "Multiple — chips",
  "description": "Multi-select showing every choice as a removable badge chip in the trigger.",
  "dependencies": [],
  "registryDependencies": [
    "popover",
    "command",
    "button",
    "badge"
  ],
  "files": [
    {
      "path": "registry/patterns/command/command-07.tsx",
      "content": "'use client'\n\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/components/ui/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/components/ui/popover'\nimport { ChevronsUpDownIcon, XIcon } from 'lucide-react'\nimport { useState } from 'react'\n\nconst skills = [\n  { value: 'react', label: 'React' },\n  { value: 'typescript', label: 'TypeScript' },\n  { value: 'node', label: 'Node.js' },\n  { value: 'figma', label: 'Figma' },\n  { value: 'graphql', label: 'GraphQL' },\n  { value: 'rust', label: 'Rust' },\n]\n\nexport function Command07() {\n  const [open, setOpen] = useState(false)\n  const [selected, setSelected] = useState<string[]>(['react', 'typescript'])\n\n  const toggle = (value: string) =>\n    setSelected((prev) =>\n      prev.includes(value)\n        ? prev.filter((item) => item !== value)\n        : [...prev, value],\n    )\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger\n        render={\n          <Button\n            variant=\"outline\"\n            role=\"combobox\"\n            aria-expanded={open}\n            className=\"hover:bg-background hover:text-foreground h-auto min-h-9 w-72 justify-between py-1 font-normal\"\n          >\n            <span className=\"flex flex-1 flex-wrap gap-1\">\n              {selected.length === 0 ? (\n                <span className=\"text-muted-foreground\">Select skills...</span>\n              ) : (\n                skills\n                  .filter((skill) => selected.includes(skill.value))\n                  .map((skill) => (\n                    <Badge\n                      key={skill.value}\n                      variant=\"secondary\"\n                      className=\"gap-1\"\n                    >\n                      {skill.label}\n                      <span\n                        role=\"button\"\n                        aria-label={`Remove ${skill.label}`}\n                        className=\"hover:text-foreground\"\n                        onPointerDown={(event) => {\n                          event.stopPropagation()\n                          event.preventDefault()\n                          toggle(skill.value)\n                        }}\n                      >\n                        <XIcon className=\"size-3\" />\n                      </span>\n                    </Badge>\n                  ))\n              )}\n            </span>\n            <ChevronsUpDownIcon className=\"text-muted-foreground shrink-0 self-center\" />\n          </Button>\n        }\n      />\n      <PopoverContent className=\"w-72 p-0\" align=\"start\">\n        <Command>\n          <CommandInput placeholder=\"Search skills...\" />\n          <CommandList>\n            <CommandEmpty>No skill found.</CommandEmpty>\n            <CommandGroup>\n              {skills.map((skill) => (\n                <CommandItem\n                  key={skill.value}\n                  value={skill.value}\n                  data-checked={selected.includes(skill.value)}\n                  onSelect={() => toggle(skill.value)}\n                >\n                  {skill.label}\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/patterns/command/command-07.tsx"
    }
  ],
  "type": "registry:block"
}