1. Select2

検索、タグ付け、リモートデータセット、無限スクロールなど、多くの利用されているオプションをサポートするjQueryベースのセレクトボックスの代替です。

フレームワークサポート:

  • React: react-select2-wrapperのようなラッパーを介して間接的にサポートされています。
  • Angular: ディレクティブやサードパーティのラッパーを介して統合可能です。
  • Vue.js: vue-select2のようなラッパーが利用可能です。

GitHubスター数: 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スター数: 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スター数: 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アプリケーション専用に設計されています。

GitHubスター数: 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の制御を可能にします。WAI-ARIAアクセシビリティを確保しながら、開発者に最適です。

フレームワークサポート:

  • React: Reactアプリケーション専用に設計されています。

GitHubスター数: 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

ライブデモ: