{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command-11",
  "title": "With label",
  "description": "Combobox composed with an accessible field Label.",
  "dependencies": [],
  "registryDependencies": [
    "popover",
    "command",
    "button",
    "label"
  ],
  "files": [
    {
      "path": "registry/patterns/command/command-11.tsx",
      "content": "'use client'\n\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 { Label } from '@/components/ui/label'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/components/ui/popover'\nimport { cn } from '@/lib/utils'\nimport { ChevronsUpDownIcon } from 'lucide-react'\nimport { useState } from 'react'\n\nconst frameworks = [\n  { value: 'next', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nexport function Command11() {\n  const [open, setOpen] = useState(false)\n  const [value, setValue] = useState('')\n\n  return (\n    <div className=\"flex w-56 flex-col gap-2\">\n      <Label htmlFor=\"framework-combobox\">Framework</Label>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger\n          render={\n            <Button\n              id=\"framework-combobox\"\n              variant=\"outline\"\n              role=\"combobox\"\n              aria-expanded={open}\n              className=\"w-full justify-between font-normal\"\n            >\n              <span className={cn(!value && 'text-muted-foreground')}>\n                {value\n                  ? frameworks.find((framework) => framework.value === value)\n                      ?.label\n                  : 'Select framework'}\n              </span>\n              <ChevronsUpDownIcon className=\"text-muted-foreground\" />\n            </Button>\n          }\n        />\n        <PopoverContent className=\"w-56 p-0\" align=\"start\">\n          <Command>\n            <CommandInput placeholder=\"Search framework...\" />\n            <CommandList>\n              <CommandEmpty>No framework found.</CommandEmpty>\n              <CommandGroup>\n                {frameworks.map((framework) => (\n                  <CommandItem\n                    key={framework.value}\n                    value={framework.value}\n                    data-checked={value === framework.value}\n                    onSelect={(current) => {\n                      setValue(current === value ? '' : current)\n                      setOpen(false)\n                    }}\n                  >\n                    {framework.label}\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/patterns/command/command-11.tsx"
    }
  ],
  "type": "registry:block"
}