マルチセレクトドロップダウンUI

複数の選択肢から項目を選べて、現在の選択状態が一目でわかるUIを作成しました。高さ制限のある環境でも使いやすいよう、スクロール可能なドロップダウンと選択中のアイテムをタグとして表示する設計になっています。

主な特徴

1. 現在の選択状態の視覚化

   • 選択中の項目がバッジ（タグ）として表示されます
   • 選択数が多い場合は「+N」形式で残りの数を表示

2. 限られた高さでの多数の選択肢表示

   • スクロール可能なドロップダウンで多数の選択肢を表示
   • 最大高さが制限されていても操作可能

3. 選択のフィードバック

   • チェックマークと背景色の変化で選択状態を明確に表示
   • 選択中の項目数がフッターに表示される

4. 検索機能

   • 多数の選択肢から素早く目的の項目を見つけられる

5. 一括クリア機能

   • 「すべて解除」ボタンで選択をリセット可能

このコンポーネントは再利用可能で、さまざまなデータセットに対応できます。例として都道府県選択と商品カテゴリー選択の2つの使用例を示しています。