Vậy sự khác biệt giữa combobox, multiselect, listbox và dropdown là gì? Dù trông có vẻ giống nhau, các UI component này phục vụ những mục đích khác nhau. Việc lựa chọn đúng phụ thuộc vào số lượng tùy chọn có sẵn và mức độ cần hiển thị chúng.
Hãy cùng phân tích sự khác biệt, mục đích sử dụng và cách chọn đúng component để tránh hiểu sai và kỳ vọng sai.
Không phải mọi dạng danh sách đều giống nhau
Tất cả các UI component trên đều hỗ trợ người dùng tương tác với danh sách. Tuy nhiên, cách chúng hoạt động có sự khác biệt rõ ràng:
- Dropdown → Danh sách bị ẩn cho đến khi người dùng kích hoạt.
- Combobox → Gõ để lọc và chọn một tùy chọn.
- Multiselect → Gõ để lọc và chọn nhiều tùy chọn.
- Listbox → Hiển thị tất cả tùy chọn mặc định (có thể cuộn).
- Dual Listbox → Di chuyển mục giữa hai danh sách.
Nói cách khác:
- Combobox kết hợp input text và dropdown để người dùng gõ tìm kiếm và chọn một mục.
- Multiselect cho phép chọn nhiều mục, thường hiển thị dưới dạng chips hoặc pills.
- Listbox hiển thị toàn bộ danh sách ngay từ đầu, phù hợp khi người dùng cần nhìn thấy tất cả lựa chọn.
- Dual listbox (Transfer list) cho phép chuyển mục giữa hai danh sách (trái ↔ phải), thường dùng trong phân quyền hoặc chọn hàng loạt.
Đừng ẩn các tùy chọn được dùng thường xuyên
Việc chọn đúng component phụ thuộc vào:
- Có bao nhiêu tùy chọn?
- Có cần hiển thị tất cả mặc định không?
Không bao giờ ẩn các tùy chọn được sử dụng thường xuyên.
Nếu người dùng liên tục chọn một mục:
- Hãy để mục đó được chọn sẵn
- Hoặc hiển thị dưới dạng chips hoặc buttons
- Sau đó mới hiển thị phần còn lại khi tương tác
Khi nào nên dùng loại nào?
Danh sách dưới 5 mục
→ Dùng radio buttons hoặc checkboxes là tối ưu nhất.
Danh sách lớn (200+ mục)
→ Dùng combobox hoặc multiselect để hỗ trợ tìm kiếm nhanh (ví dụ chọn quốc gia).
Khi cần xem nhiều mục cùng lúc
→ Dùng listbox
Khi cần chọn hàng loạt hoặc gán vai trò, nhiệm vụ
→ Dùng dual listbox
Dual listbox đặc biệt hữu ích vì:
- Cho phép xem danh sách nguồn và danh sách đã chọn song song
- Hỗ trợ thao tác chính xác hơn drag-and-drop
- Phù hợp với bulk selection
Yếu tố khả dụng (Usability) cần lưu ý
Tất cả các dạng danh sách nên hỗ trợ:
- Điều hướng bằng bàn phím (↑ ↓)
- Tab navigation
- Screen reader
Ngoài ra:
- Với danh sách trên 7 mục → nên có Select All và Clear All
- Với combobox dài → nên hiển thị toàn bộ tùy chọn khi click
- Không hiển thị phần tử không tương tác như button
- Không làm phần tử tương tác trông như label tĩnh
Kết luận: Không phải mọi thứ đều là Dropdown
Tên gọi rất quan trọng:
- Dropdown → Danh sách bị ẩn mặc định
- Multiselect → Chọn nhiều mục
- Combobox → Có input text để lọc
- Listbox → Danh sách luôn hiển thị
Mục tiêu không phải tuân thủ thuật ngữ một cách cứng nhắc, mà là:
Đồng nhất cách hiểu giữa designer, developer và người dùng.
Khi radio button hoạt động như checkbox hoặc label trông giống button — đó là lúc UX bắt đầu có vấn đề.
Tài nguyên tham khảo
- Autocomplete: UX Guidelines – Vitaly Friedman
- Combobox – eBay
- Combobox – Elastic
- Combobox – MongoDB
- Multiselect – Visa
- Listbox vs Dropdown – NN/g
- Dual Listbox – PatternFly
- Transfer List – Mantine