フィルターボタンFilterButton
Experimental

条件の選択状態をボタン上のバッジとポップオーバーで扱うフィルター操作です。

状態とバリエーション

フィルターボタンの見た目は、見た目の種類ではなく、未選択、メニュー表示中、選択済みという実行時の状態から決まります。プロパティの前に、状態ごとの見え方と使い分けを確認します。

default

フィルター

選択がなく、メニューも閉じている通常状態。

popover

フィルター

メニューを開いて、選択候補を確認している状態。

selected

フィルター

選択件数のバッジを持つ、条件適用済みの状態。

未選択状態からメニューを開き、複数条件を選択します。選択されると件数バッジが表示されます。

選択値がある時は選択済み状態になり、ボタン上に件数バッジを表示します。

内容を差し替えると、色、タグ、容量範囲など、標準リスト以外のフィルター UI を配置できます。

表は横にスクロールできます

プロパティ	型	初期値	説明
title	string	"Filter"	ボタンに表示するラベルです。
icon	ReactNode	-	任意の先頭アイコンです。未指定時はフィルターアイコンを表示します。
options	FilterOption[]	-	標準リスト表示に使う選択肢です。
selectedValues	Set<string>	-	現在選択されている値です。件数バッジと選択済み状態に使われます。
onFilterChange	(values: Set<string>) => void	-	選択値が変わった時に呼ばれます。
clearLabel	string	"Clear filters"	メニュー内のクリアアクションのラベルです。
selectedLabel	(count: number) => string	-	件数バッジの読み上げ用ラベルを生成します。
contentClassName	string	-	開いたメニューに追加するスタイル用クラスです。
contentAlign	"start" \| "center" \| "end"	"start"	ポップオーバーの横位置です。
portalContainer	HTMLElement \| null	-	擬似ブラウザや入れ子の表示領域に閉じ込めたい時の表示先です。
children	ReactNode	-	色、タグ、評価など、標準リスト以外の独自フィルター UI です。