<>Selection Controls là gì?
Selection Controls là nhóm các thành phần UI cho phép người dùng chọn một hoặc nhiều tùy chọn trong một giao diện. Chúng giúp cải thiện trải nghiệm người dùng bằng cách cung cấp các cách nhập liệu rõ ràng và dễ sử dụng.
📌 Các tình huống sử dụng Selection Controls:
Form nhập liệu (đăng ký, đăng nhập, khảo sát)
Bộ lọc dữ liệu (lọc sản phẩm theo danh mục, màu sắc, kích thước)
Cài đặt hệ thống (bật/tắt thông báo, thay đổi chế độ)
/Các loại Selection Controls
📌 1. Checkboxes (Hộp kiểm ✅)
👉 Chọn nhiều tùy chọn cùng lúc trong một danh sách.
🔹 Ví dụ sử dụng:
✔ Chọn nhiều sở thích khi tạo hồ sơ cá nhân.
✔ Đồng ý với điều khoản và chính sách (Terms & Conditions).
✔ Lọc sản phẩm theo nhiều tiêu chí trên trang e-commerce.
📌 2. Radio Buttons (Nút chọn tròn 🔘)
👉 Chỉ chọn được một tùy chọn trong một nhóm.
🔹 Ví dụ sử dụng:
✔ Chọn giới tính (Nam / Nữ / Khác).
✔ Chọn phương thức thanh toán (Thẻ tín dụng, PayPal, Tiền mặt).
📌 3. Switches (Công tắc bật/tắt 🔄)
👉 Bật hoặc tắt một tùy chọn ngay lập tức, thường được dùng cho cài đặt hoặc trạng thái hệ thống.
🔹 Ví dụ sử dụng:
✔ Bật/tắt thông báo.
✔ Chuyển đổi giữa chế độ tối (Dark Mode) và sáng (Light Mode).
/UX Best Practices khi dùng Selection Controls 🎨
✅ Sử dụng đúng loại selection control
✔ Dùng checkbox khi cần chọn nhiều tùy chọn.
✔ Dùng radio button khi chỉ chọn một giá trị trong danh sách.
✔ Dùng switch khi cần thao tác bật/tắt trạng thái.
✅ Ghi nhãn rõ ràng
✔ Mô tả rõ ràng ý nghĩa của mỗi lựa chọn.
✔ Tránh nhãn mơ hồ như “Có” / “Không” nếu không rõ ngữ cảnh.
✅ Cung cấp phản hồi trực quan (Visual Feedback)
✔ Checkboxes và radio buttons nên thay đổi màu hoặc hiển thị dấu check khi được chọn.
✔ Switches nên có hiệu ứng trượt để mô phỏng hành động bật/tắt.
✅ Sắp xếp tùy chọn hợp lý
✔ Nếu danh sách dài, có thể sử dụng một dropdown thay vì quá nhiều radio buttons.
✔ Đặt các tùy chọn phổ biến lên trên cùng.
✅ Giữ kích thước đủ lớn để dễ bấm trên mobile
✔ Khoảng cách giữa các lựa chọn đủ rộng để tránh bấm nhầm.
✔ Dùng vùng chạm lớn hơn để tăng khả năng nhấn chính xác.
