react-hook-form
Installation
SKILL.md
Khi nào dùng
- Form có input/validation client-side (login, admin create/edit).
- Không dùng cho Server Components; form component sẽ là
'use client'.
Nguồn trong repo
- Shadcn form wrapper (không sửa):
apps/web/src/components/ui/form.tsx - Form thật (admin/blog):
apps/web/src/components/admin/blog/post-form.tsx
Pattern chuẩn
- Khai báo schema Zod (ở
apps/web/src/schemas/*) và type:
export type XxxFormData = z.infer<typeof xxxSchema>
- Trong Client Component:
const form = useForm<XxxFormData, unknown, XxxFormData>({ resolver: zodResolver(xxxSchema), defaultValues })
- Render với Shadcn Form components:
<Form {...form}>+<FormField name="..." render={({ field }) => (...) } />- Dùng
<FormMessage />để hiển thị lỗi.