{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "form-field",
  "type": "registry:ui",
  "title": "Form field",
  "description": "A wrapper that pairs any input with its label, required marker, help text and an error message announced with role alert. Keeps React forms consistent.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/label.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/form-field.tsx",
      "type": "registry:ui",
      "target": "components/ui/form-field.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { Label } from \"@/components/ui/label\"\n\ntype FormFieldProps = {\n  id?: string\n  label?: React.ReactNode\n  description?: React.ReactNode\n  error?: React.ReactNode\n  required?: boolean\n  className?: string\n  children: React.ReactNode\n}\n\nfunction FormField({ id, label, description, error, required, className, children }: FormFieldProps) {\n  return (\n    <div data-slot=\"form-field\" className={cn(\"flex w-full flex-col gap-1.5\", className)}>\n      {label ? (\n        <Label htmlFor={id} className=\"text-sm font-medium tracking-[0.005em] text-fg\">\n          {label}\n          {required ? <span className=\"text-danger\"> *</span> : null}\n        </Label>\n      ) : null}\n      {children}\n      {description && !error ? (\n        <p className=\"text-xs tracking-[0.01em] text-fg-muted\">{description}</p>\n      ) : null}\n      {error ? (\n        <p role=\"alert\" className=\"text-xs tracking-[0.01em] text-danger\">{error}</p>\n      ) : null}\n    </div>\n  )\n}\nexport { FormField }\n"
    }
  ]
}