複数選択フィルタチップ
カテゴリ・価格帯・在庫のチップで商品を絞り込む。同じ群の中は OR、群をまたぐと AND。各チップに「今押したら何件か」を出し、0件は押せない色にする。
プレビュー
クリック
操作クリック／タップで動きます。
デザインの要点
- 群の中は OR・群をまたいで AND が利用者の直感。「キッチンと文具」は両方見たいが「〜¥2,000」は必ず守りたい
- チップの件数は「他の群の条件を保ったまま自分を足したら何件か」で計算する。押した後の後悔を先回りで消す
- 「すべて解除」は条件が1つでもあるときだけ出す。何もしていない画面にリセットは要らない
プロのサイトでの実例
実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。
コード（コピーして使えます）
<div class="fcm">
<div class="fcm-head">
<p class="fcm-count" id="fcm-count" aria-live="polite"></p>
<button id="fcm-reset" class="fcm-reset" type="button" hidden>すべて解除</button>
</div>
<div class="fcm-group" role="group" aria-label="カテゴリ">
<span class="fcm-glabel">カテゴリ</span>
<div class="fcm-chips" id="fcm-cat"></div>
</div>
<div class="fcm-group" role="group" aria-label="価格帯">
<span class="fcm-glabel">価格帯</span>
<div class="fcm-chips" id="fcm-price"></div>
</div>
<div class="fcm-group" role="group" aria-label="在庫">
<span class="fcm-glabel">在庫</span>
<div class="fcm-chips" id="fcm-stock"></div>
</div>
<ul class="fcm-list" id="fcm-list" aria-label="商品"></ul>
</div>