1. Select2

검색, 태깅, 원격 데이터 세트, 무한 스크롤 및 기타 많이 사용되는 옵션을 지원하는 선택 상자의 jQuery 기반 대체입니다.

프레임워크 지원:

  • React: react-select2-wrapper와 같은 래퍼를 통해 간접 지원됩니다.
  • Angular: 지시문이나 서드파티 래퍼를 통해 통합 가능합니다.
  • Vue.js: vue-select2와 같은 래퍼가 제공됩니다.

GitHub Stars: 26,000+

NPM 주간 다운로드: ~597,343

번들 크기: 약 27 KB (압축됨)

첫 출시: 2012년 3월

최신 출시: 2020년 1월 28일 (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 Stars: 6,400+

NPM 주간 다운로드: ~179,897

번들 크기: 약 78 KB (압축됨)

첫 출시: 2016년 10월

최신 출시: 2025년 2월 (v11.0.6)

웹사이트: https://choices-js.github.io/Choices

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

라이브 데모:

Choices.js를 사용한 검색 가능한 그룹화된 시간대 선택기

3. Tom Select

Tom Select는 사용자 정의 가능한 선택 상자, 자동 완성 입력 및 태그 입력을 생성하기 위한 경량의 기능이 풍부한 JavaScript 라이브러리입니다. 원격 데이터 로딩, 키보드 탐색 및 다중 선택을 지원하여 현대적이고 의존성 없는 디자인으로 Select2의 훌륭한 대안이 됩니다.

프레임워크 지원:

  • React: 공식 React 래퍼가 제공됩니다.
  • Angular: 사용자 정의 지시문을 통해 통합 가능합니다.
  • Vue.js: 공식 Vue 래퍼가 제공됩니다.

GitHub Stars: 1,800+

NPM 주간 다운로드: ~91,842

번들 크기: 약 53 KB (압축됨)

첫 출시: 2020년 11월

최신 출시: 2025년 2월 (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 Stars: 27,900+

NPM 주간 다운로드: ~4,328,556

첫 출시: 2020년 11월

최신 출시: 2018년 7월 (react-select@5.10.1)

웹사이트: https://react-select.com

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

라이브 데모:

React Select를 사용한 검색 가능한 그룹화된 시간대 선택기

5. Downshift

Downshift는 React를 위한 경량의 헤드리스 드롭다운 및 자동 완성 라이브러리입니다. 선택 상자, 자동 완성 입력 및 콤보박스를 구축하기 위한 유연하고 접근 가능하며 사용자 정의 가능한 컴포넌트를 제공합니다. 스타일을 강제하지 않으므로 UI에 대한 완전한 제어를 원하는 개발자에게 완벽합니다.

프레임워크 지원:

  • React: React 애플리케이션을 위해 특별히 설계되었습니다.

GitHub Stars: 12,200+

NPM 주간 다운로드: ~1,335,528

첫 출시: 2017년 8월

최신 출시: 2024년 8월 (v9.0.8)

웹사이트: https://www.downshift-js.com

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

라이브 데모: