click sẽ mở modal bên dưới
modal form pattern
modal là overlay panel giúp người dùng tập trung vào một tác vụ duy nhất mà không rời khỏi trang hiện tại. dùng cho form ngắn, xác nhận, và chỉnh sửa nhanh khi context quan trọng.
trigger
nút hoặc link mở modal. trigger cần mô tả rõ hành động tiếp theo.
modal form
panel modal căn giữa với lớp phủ backdrop. chứa form với các trường liên quan và primary/secondary actions.
khi nào dùng modal
| tình huống | modal | drawer | trang riêng |
|---|---|---|---|
| tạo nhanh (1-5 trường) | tốt nhất | tốt | quá mức |
| sửa mục có sẵn | tốt | tốt nhất | quá mức |
| form dài/phức tạp | chật | tốt | tốt nhất |
| xác nhận / cảnh báo | tốt nhất | quá nặng | quá nặng |
| chỉnh sửa hàng loạt | tốt | tốt nhất | quá mức |
| settings với preview | chật | tốt nhất | tốt |
thực hành tốt nhất cho modal
- một tác vụ mỗi modal — modal nên yêu cầu người dùng hoàn thành một việc, sau đó đóng lại
- chỉ form ngắn — nếu form có hơn 5-6 trường, cân nhắc dùng drawer hoặc trang riêng
- luôn có cách thoát — bao gồm nút hủy và hỗ trợ phím Escape để đóng
- click backdrop để đóng — click bên ngoài modal nên đóng nó (trừ khi có nguy cơ mất dữ liệu)
- focus trap — khi modal mở, focus di chuyển vào trong; Tab chỉ chạy qua các phần tử trong modal
- chặn scroll — scroll body khóa khi modal đang mở
- primary action rõ ràng — nút submit dùng primary variant và mô tả rõ hành động