§05-03Search & Navigation
ファセット検索
属性ごとのチェックボックスで結果を絞り込む。
件数が多い一覧から条件を重ねて目的の項目に近づく。商品や記事のように属性が多く、検索語だけでは絞れないときに向く。
実装のポイント
選択状態をカテゴリ別の配列で持ち、URL のクエリに反映して共有・戻るに対応する。各値に該当件数を表示し、0 件になる選択肢は無効化する。
- 特徴
- 状態管理
- フォーム
- デモで使っているもの
- lucide-react
§05-03Search & Navigation
属性ごとのチェックボックスで結果を絞り込む。
件数が多い一覧から条件を重ねて目的の項目に近づく。商品や記事のように属性が多く、検索語だけでは絞れないときに向く。
選択状態をカテゴリ別の配列で持ち、URL のクエリに反映して共有・戻るに対応する。各値に該当件数を表示し、0 件になる選択肢は無効化する。