kaze風
FilterPill
フィルター用ピル型トグルボタン
プレビュー
使いどころ
使う場面
- 一覧・表・チャートの絞り込み条件。複数のピルを同時にオンにでき、押した瞬間に結果へ反映する
- カテゴリー、ステータス、タグなど、5 件から 10 件程度の条件を横に並べて見せる
- 凡例を兼ねたいとき。color と dot で系列の色を示す
使わない場面
- 送信ボタンで確定するフォームの複数選択。Checkbox を使う
- 排他的な切り替え（表示形式、期間）。SegmentedControl を使う
- 選択肢が多いとき。Combobox か Select を使う
- ページ内の移動。Tabs を使う
使い方
<FilterPill active>すべて</FilterPill>
<FilterPill color="#3b82f6" dot>テクノロジー</FilterPill>
<FilterPill>マーケティング</FilterPill>プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
active | boolean | false | アクティブ（選択中）状態 |
color | string | なし | アクセントカラー（CSS色値） |
dot | boolean | false | カラードットインジケータを表示 |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
キーボード操作
| キー | 動作 |
|---|---|
| Tab | ピルにフォーカスを移す |
| Enter / Space | オンとオフを切り替える |
アクセシビリティ
- button に aria-pressed を付けた切り替えボタン。オンのとき「押されている」と読み上げられる
- 並べるときは、囲み要素に role="group" と aria-label を付け、何の絞り込みかを伝える
- dot の色だけで系列を区別させない。ラベルに名前を入れ、色が見えなくても分かるようにする
- 絞り込みの結果件数が変わったら、近くで「12 件を表示」のように件数を伝える
文言
- 条件を短い名詞で書く（「未対応」「営業部」）。「未対応のみ」のように動作を含めない
- 全件に戻す手段を用意する。「すべて」のピルか、「条件をクリア」のリンク