{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command-12",
  "title": "React Hook Form + Zod",
  "description": "Controller binds the combobox to RHF; Zod resolver drives FieldError on submit.",
  "dependencies": [
    "react-hook-form",
    "zod",
    "@hookform/resolvers",
    "sonner"
  ],
  "registryDependencies": [
    "popover",
    "command",
    "button",
    "field"
  ],
  "files": [
    {
      "path": "registry/patterns/command/command-12.tsx",
      "content": "'use client'\n\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { Controller, useForm } from 'react-hook-form'\nimport { toast } from 'sonner'\nimport * as z from 'zod'\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 {\n  Field,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from '@/components/ui/field'\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] as const\n\nconst formSchema = z.object({\n  framework: z.string().min(1, 'Select a framework.'),\n})\n\ntype FormValues = z.infer<typeof formSchema>\n\nexport function Command12() {\n  const [open, setOpen] = useState(false)\n  const form = useForm<FormValues>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      framework: '',\n    },\n  })\n\n  function onSubmit(data: FormValues) {\n    toast.success('Submitted', {\n      description: frameworks.find((item) => item.value === data.framework)\n        ?.label,\n    })\n  }\n\n  return (\n    <form\n      id=\"command-rhf-form\"\n      onSubmit={form.handleSubmit(onSubmit)}\n      className=\"flex w-full max-w-sm flex-col gap-4\"\n    >\n      <FieldGroup>\n        <Controller\n          name=\"framework\"\n          control={form.control}\n          render={({ field, fieldState }) => (\n            <Field data-invalid={fieldState.invalid}>\n              <FieldLabel htmlFor=\"command-rhf-framework\">Framework</FieldLabel>\n              <Popover open={open} onOpenChange={setOpen}>\n                <PopoverTrigger\n                  render={\n                    <Button\n                      id=\"command-rhf-framework\"\n                      type=\"button\"\n                      variant=\"outline\"\n                      role=\"combobox\"\n                      aria-expanded={open}\n                      aria-invalid={fieldState.invalid}\n                      className=\"w-full justify-between font-normal\"\n                    >\n                      <span\n                        className={cn(!field.value && 'text-muted-foreground')}\n                      >\n                        {field.value\n                          ? frameworks.find(\n                              (item) => item.value === field.value,\n                            )?.label\n                          : 'Select framework'}\n                      </span>\n                      <ChevronsUpDownIcon className=\"text-muted-foreground\" />\n                    </Button>\n                  }\n                />\n                <PopoverContent\n                  className=\"w-(--anchor-width) p-0\"\n                  align=\"start\"\n                >\n                  <Command>\n                    <CommandInput placeholder=\"Search framework...\" />\n                    <CommandList>\n                      <CommandEmpty>No framework found.</CommandEmpty>\n                      <CommandGroup>\n                        {frameworks.map((item) => (\n                          <CommandItem\n                            key={item.value}\n                            value={item.value}\n                            data-checked={field.value === item.value}\n                            onSelect={(current) => {\n                              field.onChange(\n                                current === field.value ? '' : current,\n                              )\n                              setOpen(false)\n                            }}\n                          >\n                            {item.label}\n                          </CommandItem>\n                        ))}\n                      </CommandGroup>\n                    </CommandList>\n                  </Command>\n                </PopoverContent>\n              </Popover>\n              {fieldState.invalid && <FieldError errors={[fieldState.error]} />}\n            </Field>\n          )}\n        />\n      </FieldGroup>\n      <Button type=\"submit\" size=\"sm\">\n        Submit\n      </Button>\n    </form>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/patterns/command/command-12.tsx"
    }
  ],
  "type": "registry:block"
}