Filter

FilterGroup 单个可折叠分组（checkbox / radio / range / empty），FilterTrigger 按钮，FilterPanel 完整面板。

FilterGroup

折叠分组卡。通过 content 判别联合切换类型，3 主色。

Import

import { FilterGroup, FilterTrigger, FilterPanel } from "@forge-ui/react";

Checkbox

content.type="checkbox" 多选项，options[].checked 驱动右侧 accent 条。

Option AOption BOption C

1<FilterGroup
2  title="Category"
3  content={{
4    type: "checkbox",
5    options: [
6      { value: "a", label: "Option A", checked: false },
7      { value: "b", label: "Option B", checked: true },
8    ],
9  }}
10/>

Radio

ActiveArchived

1<FilterGroup
2  title="Status"
3  content={{
4    type: "radio",
5    options: [
6      { value: "1", label: "Active", checked: true },
7      { value: "2", label: "Archived" },
8    ],
9  }}
10/>

Range

数值区间，两个输入 + minLabel / maxLabel。

Minimum

Maximum

1<FilterGroup
2  title="Price"
3  content={{ type: "range", minValue: "0", maxValue: "999" }}
4  hasSelection
5/>

API

Attribute	Type	Default	Description
`title`	`string`	`'Filter Group'`	折叠面板标题。
`color`	`'purple' \| 'blue' \| 'black'`	`'purple'`	主色。
`content`	`FilterGroupContent`	`{ type: 'empty' }`	内容判别联合：empty / checkbox / radio / range。
`defaultOpen`	`boolean`	`auto`	初始展开态，默认非 empty 自动展开。
`hasSelection`	`boolean`	`auto`	右侧 accent 条强制开关，auto 根据 options.checked 推导。

FilterTrigger

圆角按钮触发器，含计数徽标与 open 状态高亮。

Usage

1<FilterTrigger count={8} onClick={() => {}} />

API

Attribute	Type	Default	Description
`label`	`string`	`'Filters'`	按钮文案。
`color`	`'purple' \| 'blue' \| 'black'`	`'purple'`	open 态主色。
`count`	`number`	`—`	右侧红色计数徽标，> 0 时显示。
`open`	`boolean`	`false`	受控 open 状态。
`onClick`	`() => void`	`—`	外部点击回调，传了会覆盖内建 panel。
`panel`	`ReactNode \| (close) => ReactNode`	`—`	可选浮层内容，传 panel 后 trigger 自管 open 态。

FilterPanel

完整筛选面板：标题 + Reset + 内容区（装 FilterGroup）+ Cancel / Apply。

Usage

Filters

Option AOption BOption C

1<FilterPanel title="Filters" onReset={() => {}} onApply={() => {}} onCancel={() => {}}>
2  <FilterGroup title="Category" content={{ type: "checkbox", options }} />
3</FilterPanel>

API

Attribute	Type	Default	Description
`title`	`string`	`'Filters'`	顶部标题。
`color`	`'purple' \| 'blue' \| 'black'`	`'purple'`	Apply 按钮主色。
`children`	`ReactNode`	`—`	面板主体（通常是若干 FilterGroup）。
`onReset / onCancel / onApply`	`() => void`	`—`	三个操作回调。
`applyLabel / cancelLabel / resetLabel`	`string`	`—`	对应按钮文案。

看所有变体 →