{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dropdown-18",
  "title": "React Hook Form + Zod",
  "description": "Controller binds a radio group to RHF; Zod requires a selection.",
  "dependencies": [
    "react-hook-form",
    "zod",
    "@hookform/resolvers",
    "sonner"
  ],
  "registryDependencies": [
    "dropdown-menu",
    "button",
    "field"
  ],
  "files": [
    {
      "path": "registry/patterns/dropdown/dropdown-18.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  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu'\nimport {\n  Field,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from '@/components/ui/field'\nimport { ChevronDownIcon } from 'lucide-react'\n\nconst visibilities = [\n  { value: 'public', label: 'Public' },\n  { value: 'private', label: 'Private' },\n  { value: 'team', label: 'Team only' },\n] as const\n\nconst formSchema = z.object({\n  visibility: z.string().min(1, 'Choose a visibility.'),\n})\n\ntype FormValues = z.infer<typeof formSchema>\n\nexport function Dropdown18() {\n  const form = useForm<FormValues>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      visibility: '',\n    },\n  })\n\n  function onSubmit(data: FormValues) {\n    const label = visibilities.find(\n      (item) => item.value === data.visibility,\n    )?.label\n    toast.success('Submitted', {\n      description: label ?? data.visibility,\n    })\n  }\n\n  return (\n    <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=\"visibility\"\n          control={form.control}\n          render={({ field, fieldState }) => {\n            const selected = visibilities.find(\n              (item) => item.value === field.value,\n            )\n\n            return (\n              <Field data-invalid={fieldState.invalid}>\n                <FieldLabel htmlFor=\"dropdown-rhf-visibility\">\n                  Visibility\n                </FieldLabel>\n                <DropdownMenu>\n                  <DropdownMenuTrigger\n                    render={\n                      <Button\n                        id=\"dropdown-rhf-visibility\"\n                        type=\"button\"\n                        variant=\"outline\"\n                        className=\"w-full justify-between font-normal\"\n                        aria-invalid={fieldState.invalid}\n                      >\n                        <span\n                          className={selected ? '' : 'text-muted-foreground'}\n                        >\n                          {selected?.label ?? 'Select visibility'}\n                        </span>\n                        <ChevronDownIcon className=\"text-muted-foreground\" />\n                      </Button>\n                    }\n                  />\n                  <DropdownMenuContent\n                    align=\"start\"\n                    className=\"w-(--anchor-width)\"\n                  >\n                    <DropdownMenuRadioGroup\n                      value={field.value}\n                      onValueChange={field.onChange}\n                    >\n                      {visibilities.map((item) => (\n                        <DropdownMenuRadioItem\n                          key={item.value}\n                          value={item.value}\n                        >\n                          {item.label}\n                        </DropdownMenuRadioItem>\n                      ))}\n                    </DropdownMenuRadioGroup>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n                {fieldState.invalid && (\n                  <FieldError errors={[fieldState.error]} />\n                )}\n              </Field>\n            )\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/dropdown/dropdown-18.tsx"
    }
  ],
  "type": "registry:block"
}