setup-form

Create a complete form setup with React Hook Form, Zod validation, and shadcn/ui form components.

Instructions

1. Install required dependencies if not present:

   • react-hook-form
   • @hookform/resolvers
   • zod
   • Required shadcn components: form, input, button, etc.

2. Create the form with:

   • Zod schema for validation
   • Form component with React Hook Form
   • Proper error handling
   • Loading states
   • Success feedback

Template Structure

// lib/validations/[form-name].ts
import * as z from "zod"

export const [formName]Schema = z.object({
  // Define fields
})

export type [FormName]Values = z.infer<typeof [formName]Schema>

// components/forms/[form-name]-form.tsx
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { [formName]Schema, type [FormName]Values } from "@/lib/validations/[form-name]"
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { toast } from "@/components/ui/use-toast"

export function [FormName]Form() {
  const form = useForm<[FormName]Values>({
    resolver: zodResolver([formName]Schema),
    defaultValues: {
      // Set defaults
    },
  })

  async function onSubmit(data: [FormName]Values) {
    try {
      // Handle submission
      toast({
        title: "Success",
        description: "Form submitted successfully",
      })
    } catch (error) {
      toast({
        title: "Error",
        description: "Something went wrong",
        variant: "destructive",
      })
    }
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
        {/* Form fields */}
        <Button 
          type="submit" 
          disabled={form.formState.isSubmitting}
        >
          {form.formState.isSubmitting ? "Submitting..." : "Submit"}
        </Button>
      </form>
    </Form>
  )
}