{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "input-form", "type": "registry:example", "author": "shadcn (https://ui.shadcn.com)", "registryDependencies": [ "input", "button", "form" ], "files": [ { "path": "examples/input-form.tsx", "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { toast } from \"@/registry/default/hooks/use-toast\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n Form,\n FormControl,\n FormDescription,\n FormField,\n FormItem,\n FormLabel,\n FormMessage,\n} from \"@/registry/default/ui/form\"\nimport { Input } from \"@/registry/default/ui/input\"\n\nconst FormSchema = z.object({\n username: z.string().min(2, {\n message: \"Username must be at least 2 characters.\",\n }),\n})\n\nexport default function InputForm() {\n const form = useForm>({\n resolver: zodResolver(FormSchema),\n defaultValues: {\n username: \"\",\n },\n })\n\n function onSubmit(data: z.infer) {\n toast({\n title: \"You submitted the following values:\",\n description: (\n
\n          {JSON.stringify(data, null, 2)}\n        
\n ),\n })\n }\n\n return (\n
\n \n (\n \n Username\n \n \n \n \n This is your public display name.\n \n \n \n )}\n />\n \n \n \n )\n}\n", "type": "registry:example", "target": "" } ] }