<>Input Fields là các ô nhập dữ liệu trong UI, cho phép người dùng nhập văn bản, số, mật khẩu, email hoặc bất kỳ dữ liệu nào khác. Đây là một phần quan trọng trong Form Components, giúp thu thập thông tin từ người dùng.
/Các loại Input Fields phổ biến
– Dưới đây là các loại trường nhập phổ biến trong UI/UX:
1. Text Input (Nhập văn bản) 📝
🔍 Search field (Tìm kiếm)
📝 Comment box (Nhập bình luận)
🔑 Username field (Tên đăng nhập)
2. Password Input (Nhập mật khẩu) 🔒
✔️ Nút “Show/Hide password” để người dùng kiểm tra.
✔️ Tiêu chí đặt mật khẩu (VD: Ít nhất 8 ký tự, có số, ký tự đặc biệt…).
✔️ Strength Indicator (Thanh đo độ mạnh của mật khẩu).
3. Email Input (Nhập email) 📧
✔️ Định dạng email hợp lệ (VD: name@example.com).
✔️ Cảnh báo nếu thiếu “@” hoặc “.com”.
✔️ Tự động đề xuất domain phổ biến (Gmail, Yahoo…).
4. Number Input (Nhập số) 🔢
✔️ Nhập số điện thoại, tuổi, số lượng sản phẩm…
✔️ Thường có nút tăng/giảm (+/-) hoặc slider.
5. Date & Time Input (Chọn ngày/giờ) 📅⏳
✔️ Nhập thủ công (YYYY-MM-DD).
✔️ Dùng Date Picker (Lịch chọn ngày).
✔️ Dùng Time Picker (Đồng hồ chọn giờ).
6. Dropdown Input (Chọn từ danh sách) ⬇️
✔️ Dropdown đơn giản – Chọn một giá trị (VD: Chọn quốc gia).
✔️ Multi-select dropdown – Chọn nhiều giá trị.
✔️ Autocomplete dropdown – Hiển thị gợi ý khi nhập.
7. Radio Button & Checkbox (Chọn một hoặc nhiều) ✅🔘
🔹 Radio button – Chọn một giá trị trong nhiều tùy chọn.
🔹 Checkbox – Chọn nhiều giá trị cùng lúc.
8. File Upload (Tải lên tệp) 📂
✔️ Giới hạn định dạng tệp (JPEG, PNG, PDF…).
✔️ Hiển thị kích thước tối đa.
✔️ Có drag & drop để tải lên dễ dàng.
/Trạng thái của Input Fields
Mỗi ô nhập liệu có nhiều trạng thái khác nhau:
1. Default (Mặc định)
📌 Hiển thị ô nhập với placeholder hoặc nhãn.
2. Focus (Đang nhập)
📌 Viền đổi màu (thường là xanh) để báo hiệu người dùng đang nhập.
3. Filled (Đã nhập dữ liệu)
📌 Hiển thị nội dung đã nhập, có thể có icon “✔️” nếu hợp lệ.
4. Error (Lỗi) ❌
📌 Hiển thị viền đỏ + thông báo lỗi (VD: “Email không hợp lệ”).
5. Disabled (Vô hiệu hóa) 🚫
📌 Không cho phép nhập, thường có màu xám nhạt.
/ Best Practices khi thiết kế Input Fields
✅ 1. Luôn có nhãn (Label)
✔️ Không chỉ dựa vào placeholder vì nó có thể biến mất khi nhập.
✔️ Đặt nhãn trên hoặc bên trái để dễ nhìn.
✅ 2. Sử dụng Placeholder hợp lý
✔️ Giúp người dùng hiểu cần nhập gì.
✔️ Không thay thế label.
✅ 3. Hiển thị lỗi rõ ràng
✔️ Dùng màu đỏ + icon cảnh báo ⚠️.
✔️ Cung cấp hướng dẫn sửa lỗi (VD: “Mật khẩu ít nhất 8 ký tự”).
✅ 4. Định dạng dữ liệu tự động
✔️ Số điện thoại tự thêm dấu cách hoặc dấu gạch.
✔️ Tự động chuyển chữ cái đầu thành viết hoa (VD: Họ & Tên).
✅ 5. Kích thước và khoảng cách hợp lý
✔️ Input field đủ lớn để người dùng thao tác dễ dàng.
✔️ Khoảng cách giữa các trường nhập không quá sát.
✅ 6. Hỗ trợ nhập liệu nhanh
✔️ Auto-complete – Gợi ý khi nhập địa chỉ, email…
✔️ Auto-format – Tự động định dạng số điện thoại, thẻ ngân hàng…
