1. Select2
Một giải pháp thay thế cho select box dựa trên jQuery, hỗ trợ searching, tagging, remote data sets, infinite scrolling và nhiều tùy chọn phổ biến khác.
Hỗ Trợ Framework:
- React: Hỗ trợ gián tiếp thông qua các wrapper như react-select2-wrapper.
- Angular: Có thể tích hợp thông qua directives hoặc các wrappers từ bên thứ ba.
- Vue.js: Có các wrapper như vue-select2.
Sao trên Github: 26,000+
Tải Xuống Hàng Tuần NPM: ~597,343
Kích Thước Bundle: Xấp xỉ 27 KB (đã nén)
Phiên Bản Đầu Tiên: Tháng 3 năm 2012
Phiên Bản Mới Nhất: Ngày 28 tháng 1 năm 2020 (v4.0.13)
Website: https://select2.org
Github: https://github.com/select2/select2
Demo:
2. Choices.js
Choices.js là một thư viện JavaScript nhẹ, không phụ thuộc (dependency-free), dùng để tạo các dropdown đa chọn (multi-select), trường nhập tag (tag inputs) và trường autocomplete có thể tùy chỉnh. Nó mang lại sự linh hoạt tuyệt vời, phong cách hiện đại và khả năng truy cập (accessibility) cao, rất phù hợp để nâng cấp các biểu mẫu mà không cần dựa vào jQuery.
Hỗ Trợ Framework:
- React: Có thể tích hợp với các wrapper tùy chỉnh.
- Angular: Có thể tích hợp thông qua các directive.
- Vue.js: Có thể tích hợp với các thành phần tùy chỉnh.
Sao trên GitHub: 6,400+
Tải Xuống Hàng Tuần NPM: ~179,897
Kích Thước Bundle: xấp xỉ 78 KB (đã nén)
Phiên Bản Đầu Tiên: Tháng 10 năm 2016
Phiên Bản Mới Nhất: Tháng 2 năm 2025 (v11.0.6)
Website: https://choices-js.github.io/Choices
Github: https://github.com/Choices-js/Choices
Demo:
3. Tom Select
Tom Select là một thư viện JavaScript nhẹ và giàu tính năng để tạo các select box có thể tùy chỉnh, autocomplete input, và tag input. Nó hỗ trợ tải dữ liệu từ xa, điều hướng bằng bàn phím và chọn nhiều mục, là một lựa chọn thay thế tuyệt vời cho Select2 với thiết kế hiện đại và không phụ thuộc vào thư viện bên ngoài.
Hỗ Trợ Framework:
- React: Wrapper chính thức cho React có sẵn.
- Angular: Có thể tích hợp thông qua custom directives.
- Vue.js: Wrapper chính thức cho Vue có sẵn.
Sao trên GitHub: 1,800+
Tải Xuống Hàng Tuần NPM: ~91,842
Kích Thước Bundle: xấp xỉ 53 KB (đã nén)
Phiên Bản Đầu Tiên: Tháng 11 năm 2020
Phiên Bản Mới Nhất: Tháng 2 năm 2025 (v2.4.3)
Website: https://tom-select.js.org/
Github: https://github.com/orchidjs/tom-select
Demo:
4. React Select
React-Select là thư viện dropdown cho React với giao diện hiện đại, dễ tùy biến (customizable) và rất linh hoạt (flexible). Nó hỗ trợ tìm kiếm (searchable), chọn nhiều mục cùng lúc (multi-select), tải dữ liệu bất đồng bộ (async) và nhóm các tùy chọn lại với nhau (grouped options) — rất phù hợp khi làm việc với dữ liệu lớn. Thư viện cũng tích hợp sẵn khả năng truy cập (accessibility) và tùy chỉnh giao diện (theming), giúp bạn dễ dàng xây dựng các form đẹp và chuyên nghiệp cho ứng dụng React của mình.
Hỗ Trợ Framework:
- React: Được thiết kế đặc biệt cho các ứng dụng React.
Sao trên GitHub: 27,900+
Tải Xuống Hàng Tuần NPM: ~4,328,556
Phiên Bản Đầu Tiên: Tháng 11 năm 2020
Phiên Bản Mới Nhất: Tháng 7 năm 2018 (react-select@5.10.1)
Website: https://react-select.com
Github: https://github.com/JedWatson/react-select
Demo:
5. Downshift
Downshift là một thư viện dropdown và tự động hoàn thành (autocomplete) nhẹ (lightweight), không áp kiểu giao diện sẵn (headless) dành cho React. Thư viện cung cấp các component linh hoạt (flexible), dễ tùy biến (customizable) và hỗ trợ khả năng truy cập (accessibility) để bạn xây dựng các hộp chọn (select box), trường nhập tự động (autocomplete input) hoặc combobox theo cách riêng của mình — hoàn toàn không bị ràng buộc bởi giao diện mặc định nào. Rất phù hợp với các developer muốn toàn quyền kiểm soát giao diện UI mà vẫn đảm bảo tuân thủ chuẩn WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications).
Hỗ Trợ Framework:
- React: Được thiết kế đặc biệt cho các ứng dụng React.
Sao trên GitHub: 12,200+
Tải Xuống Hàng Tuần NPM: ~1,335,528
Phiên Bản Đầu Tiên: Tháng 8 năm 2017
Phiên Bản Mới Nhất: Tháng 8 năm 2024 (v9.0.8)
Website: https://www.downshift-js.com
Github: https://github.com/downshift-js/downshift
Demo: