react hook form shadcn ui: ráp field Radix có kiểm soát state tập trung
· Tác giả: Trường — Founder Webchốt
react hook form shadcn ui kết hợp thư viện quản lý form nhẹ với bộ component copy-paste dựa Radix — giúp team SME có UI đồng nhất mà không kéo theo package CSS đóng. Trên dashboard nội bộ, tần suất form dài làm manual state mệt mỏi và lỗi thông báo lệch field. Bài viết mô tả mẫu FormField, cách map lỗi từ zodResolver và checklist accessibility không thể bỏ qua khi dùng Select hay DatePicker. Cần triển khai nhanh: dịch vụ, giá, liên hệ — 0905 151 701, hi@webchot.com.
Gắn aria-describedby với FormMessage để screen reader đọc lỗi đúng | Nguồn: webchot.com
FormField pattern và defaultValues ổn định
defaultValues nên cố định shape — tránh {} rỗng thay đổi mỗi render khiến dirty state lệch. Với dữ liệu async, reset sau khi fetch nhưng giữ chặt schema. Tách field phức tạp sang component nhỏ bọc FormField để tái sử dụng giữa các trang.
react hook form shadcn ui với Select và Combobox async
Combobox cần đồng bộ value string với option list; khi search async, debounce request và hiển thị trạng thái loading trong Command component — tránh race đặt giá trị cũ. Kiểm tra keyboard navigation sau mỗi lần bump radix-ui.
- Điểm 1: Giới hạn chiều cao dropdown trên mobile.
- Điểm 2: Thông báo lỗi không chỉ màu đỏ — kèm icon.
- Điểm 3: Reset toàn form sau submit thành công nếu UX yêu cầu.
- Điểm 4: map server error vào setError field cụ thể.
Bảng so sánh: formik so với react-hook-form
Chọn cho codebase mới trên Next.js.
| Tiêu chí | Lựa chọn A | Lựa chọn B | Khuyên dùng |
|---|---|---|---|
| Số lần render | Formik nhiều hơn một số case | RHF ít re-render hơn | RHF cho form lớn |
| Học curve | Quen với dev cũ | API khác một chút | Đào tạo 1–2 buổi |
| Plugin resolver | Có | Có | Dùng zodResolver |
| Tích hợp shadcn | Được | Tài liệu nhiều ví dụ | Theo doc mẫu |
Không cần tranh luận tôn giáo — quan trọng chuẩn nội bộ.
Quy trình review form trước release
- Bước 1: Kiểm tra tab order hợp lý.
- Bước 2: Thử screen reader với lỗi field.
- Bước 3: Test submit lỗi server 500 hiển thị rõ.
- Bước 4: Thử mạng chậm với pending button.
- Bước 5: Ghi nhận edge case số điện thoại VN.
Bỏ bước hai dễ bị phản hồi accessibility tiêu cực.
Phương án dịch vụ Webchốt
Xem trang dịch vụ khi muốn form CRM nội bộ hoàn chỉnh. Template có thể giúp bắt đầu nhanh. Liên hệ hi@webchot.com hoặc 0905 151 701.
Sai lầm phổ biến khi ráp shadcn form
Bốn lỗi làm UX tệ dù UI đẹp.
- Sai lầm 1: Không nối FormMessage với id input.
- Sai lầm 2: Dùng watch không cần thiết làm re-render toàn form.
- Sai lầm 3: Bỏ qua loading state async defaultValues.
- Sai lầm 4: Không disable submit khi invalid nhưng vẫn gửi được bằng Enter hack.
Với form nhiều bước onboarding nhân sự, hãy xem xét useFieldArray và schema partial cho từng bước — đỡ phải submit toàn bộ state ảo khi người dùng bấm Quay lại. Khi cần mask số điện thoại, đảm bảo giá trị lưu server là chuỗi normalized chứ không phải chuỗi hiển thị có dấu ngoặc. Thử nghiệm với IME tiếng Việt trên Windows vì một số bug chỉ xuất hiện khi gõ dấu trong ô email (hy hiếm nhưng có thể xảy ra khi copy-paste). Ghi guideline trong Storybook về thứ tự tab giữa các Select mở cửa sổ nhỏ — tester cần biết “chuẩn vàng” là gì. Sau mỗi lần nâng phiên bản react-hook-form, đọc changelog để biết có thay đổi hành vi reset không.
Khi tích hợp upload ảnh chứng từ, dùng progress tách khỏi submit form chính để người dùng không nghĩ cả form đang kẹt. Với locale tiếng Việt, kiểm tra lỗi hiển thị trên màn hình 320px — một số FormDescription dài có thể đẩy nút xuống khó thấy. Ghi sẵn map lỗi server 5xx thành copy thân thiện thay vì stack trace. Nếu dùng watch để hiện field có điều kiện, debounce validate async để không spam API. Sau mỗi sprint, rà các field optional thực sự có cần hay không — form ngắn hơn thường convert tốt hơn.
Với form có điều khoản pháp lý dài, hãy tách checkbox đồng ý ra khỏi stream field động — dễ test và ít lỗi focus. Khi dùng server action trả fieldErrors dạng map, đảm bảo key trùng tên control register — lệch một ký tự là không hiện lỗi. Thử nghiệm gõ nhanh trên bàn phím cơ với repeat rate cao để xem debounce có nuốt ký tự không. Ghi log client khi submit throw để phân biệt lỗi mạng và lỗi validation. Training CSKH đọc mã lỗi Zod ngắn gọn giúp ticket xử lý nhanh.
React Hook Form kết hợp shadcn thường đặt `FormControl` trong `FormField`; hãy kiểm tra mode `onBlur` vs `onChange` với số điện thoại Việt Nam — validate quá sớm làm người dùng khó chịu, quá muộn thì lỗi tràn. Với field array động, dùng `useFieldArray` và đồng bộ index khi server trả lỗi theo dòng — map sai là mất niềm tin. Khi tích hợp OCR upload hóa đơn, disable nút submit cho đến khi parsing xong hoặc hiển thị trạng thái riêng, tránh double gửi. Ghi storybook cho trạng thái lỗi server 422 kèm toast và field highlight. Với khách B2B cần chữ ký số, đừng reset form sau submit thành công nếu họ cần in chứng từ — lưu state và đề xuất tải PDF.
Trên mobile Safari, kiểm tra zoom khi focus input nhỏ — design system của shadcn có thể cần chỉnh `text-base` cho ô nhập nhạy cảm. Khi triển khai đa ngôn ngữ, dịch cả aria-invalid message chứ không chỉ label. Nếu bạn cần đội triển khai form Next.js, Webchốt có thể chuẩn hóa pattern error + telemetry.
Khi dùng `defaultValues` từ API, nhớ reset form sau khi load xong — giá trị cũ làm validation hiển thị sai lúc đầu. Với field số tiền VND, parse trong `setValueAs` để Zod nhận số thuần trong khi hiển thị chuỗi định dạng. Checkbox “đồng ý điều khoản” nên gắn error summary ở đầu form cho screen reader. Nếu server trả lỗi cross-field (ví dụ ngày bắt đầu sau ngày kết thúc), map vào `setError` với `root` để hiển thị banner rõ. Test máy tính bảng với bàn phím ảo vì focus jump khác desktop. Ghi log khi user abandon form giữa chừng để biết field nào gây nản.
Đội nhỏ nên tạo snippet VS Code cho `FormField` boilerplate — giảm copy sai tên control. Khi export PDF từ dữ liệu form, kiểm tra ký tự tiếng Việt và font nhúng để khách không nhận file lỗi dấu.
Khi đặt `mode: onTouched`, nhắc QA bấm Tab qua toàn bộ field — một số lỗi chỉ hiện khi blur lần lượt. Với team chỉ dùng Mac, vẫn cần một máy Windows trong lab vì behavior IME và focus có khác biệt thực địa.
FAQ — react hook form shadcn ui
Multi-step form?
Dùng wizard state hoặc route segment — đồng bộ schema từng bước.
Sizing input theo design?
Chỉnh class thông qua slot Input — giữ token chiều cao nhất quán.
Sử dụng trong Server Component?
Form client ở leaf — tránh nhầm boundary.
Có storybook không?
Nên viết story cho field tái sử dụng nhiều.
Webchốt hỗ trợ design form?
Có — gọi 0905 151 701 hoặc hi@webchot.com.
Liên Hệ Webchốt
react hook form shadcn ui giúp SME có UI chuyên nghiệp với effort vừa phải. Webchốt có thể triển khai. Liên hệ 0905 151 701 hoặc hi@webchot.com.
- Hotline / Zalo: 0905 151 701 — gặp anh Trường (founder/dev).
- Chat Zalo: zalo.me/0905151701 — phản hồi nhanh.
- Email: hi@webchot.com — phản hồi <12h làm việc.
- Studio: 262/1/93 Phan Anh, Phường Phú Thạnh, TP.HCM (T2–T7, 9h–18h).
Tham khảo thêm: 17 template Next.js · 10 dịch vụ web chuyên sâu · bảng giá Webchốt 2026 · 12 công cụ kế toán/tài chính miễn phí.
Reference: Next.js docs · web.dev Core Web Vitals.
