forms

Forms

Rules

• React Hook Form with zodResolver from @hookform/resolvers/zod.
• Schemas live in schemas/ (*.schema.ts), never in the component file.
• Every field has a value in defaultValues, typed from the schema.
• Read live values with useWatch or Controller, not root watch(). Disable submit while isSubmitting.
• Map server errors to fields or to root with setError.
• The server validates the same schema again before it acts.
• Small forms without client validation may use an Action with useActionState.

Bans

• Inputs managed with useState.
• Syncing form state with useEffect.
• Handling the native submit event instead of using handleSubmit.

import { createProject } from "@/features/projects/api"; import { projectSchema } from "@/features/projects/schemas"; import type { ProjectInput } from "@/features/projects/schemas";

export function ProjectForm() { const form = useForm({ resolver: zodResolver(projectSchema), defaultValues: { name: "" }, });

const onSubmit = form.handleSubmit(async (values) => { const result = await createProject(values); if (result.error) form.setError("root", { message: result.error }); });

return ( Name <input id="project-name" {...form.register("name")} /> {form.formState.errors.name?.message} Create ); }

</example>