1. Select2

Замена для select-боксов на основе jQuery, поддерживающая поиск, тегирование, удаленные наборы данных, бесконечный прокрутку и многие другие часто используемые опции.

Поддержка фреймворков:

  • React: Косвенная поддержка через обертки, такие как react-select2-wrapper.
  • Angular: Интеграция возможна через директивы или сторонние обертки.
  • Vue.js: Доступны обертки, такие как vue-select2.

Звезды на Github: 26,000+

Еженедельные загрузки NPM: ~597,343

Размер пакета: Приблизительно 27 КБ (минифицированный)

Первая версия: Март 2012

Последняя версия: 28 января 2020 (v4.0.13)

Сайт: https://select2.org

Github: https://github.com/select2/select2

Живой демонстрация:

Поисковый, сгруппированный селектор часовых поясов с Select2

2. Choices.js

Choices.js — это легкая, не имеющая зависимостей библиотека JavaScript для создания настраиваемых выпадающих списков с множественным выбором, полей для ввода тегов и автозаполнения. Она предлагает отличную гибкость, современный стиль и доступность, что делает ее идеальной для улучшения форм без зависимости от jQuery.

Поддержка фреймворков:

  • React: Может быть интегрирован с пользовательскими обертками.
  • Angular: Интеграция возможна через директивы.
  • Vue.js: Может быть интегрирован с пользовательскими компонентами.

Звезды на GitHub: 6,400+

Еженедельные загрузки NPM: ~179,897

Размер пакета: приблизительно 78 КБ (минифицированный)

Первая версия: Октябрь 2016

Последняя версия: Февраль 2025 (v11.0.6)

Сайт: https://choices-js.github.io/Choices

Github: https://github.com/Choices-js/Choices

Живой демонстрация:

Поисковый, сгруппированный селектор часовых поясов с Choices.js

3. Tom Select

Tom Select — это легкая, богатая функциями библиотека JavaScript для создания настраиваемых select-боксов, полей автозаполнения и полей для ввода тегов. Она поддерживает загрузку удаленных данных, навигацию с клавиатуры и множественный выбор, что делает ее отличной альтернативой Select2 с современным дизайном без зависимостей.

Поддержка фреймворков:

  • React: Доступна официальная обертка для React.
  • Angular: Интеграция возможна через пользовательские директивы.
  • Vue.js: Доступна официальная обертка для Vue.

Звезды на GitHub: 1,800+

Еженедельные загрузки NPM: ~91,842

Размер пакета: приблизительно 53 КБ (минифицированный)

Первая версия: Ноябрь 2020

Последняя версия: Февраль 2025 (v2.4.3)

Сайт: https://tom-select.js.org/

Github: https://github.com/orchidjs/tom-select

Живой демонстрация:

Поисковый, сгруппированный селектор часовых поясов с Tom Select

4. React Select

React-Select — это красивый, гибкий и высоконастраиваемый библиотека выпадающих списков для React. Она поддерживает поисковые, асинхронные, множественные и сгруппированные опции, что делает ее идеальной для работы с большими наборами данных. С встроенной доступностью и темами, это отличный выбор для современных приложений на React.

Поддержка фреймворков:

  • React: Специально разработан для приложений на React.

Звезды на GitHub: 27,900+

Еженедельные загрузки NPM: ~4,328,556

Первая версия: Ноябрь 2020

Последняя версия: Июль 2018 (react-select@5.10.1)

Сайт: https://react-select.com

Github: https://github.com/JedWatson/react-select

Живой демонстрация:

Поисковый, сгруппированный селектор часовых поясов с React Select

5. Downshift

Downshift — это легкая, безголовая библиотека выпадающих списков и автозаполнения для React. Она предоставляет гибкие, доступные и настраиваемые компоненты для создания select-боксов, полей автозаполнения и комбобоксов без навязывания стилей. Идеально подходит для разработчиков, которые хотят полного контроля над пользовательским интерфейсом, обеспечивая при этом доступность WAI-ARIA.

Поддержка фреймворков:

  • React: Специально разработан для приложений на React.

Звезды на GitHub: 12,200+

Еженедельные загрузки NPM: ~1,335,528

Первая версия: Август 2017

Последняя версия: Август 2024 (v9.0.8)

Сайт: https://www.downshift-js.com

Github: https://github.com/downshift-js/downshift

Живой демонстрация: