FilterGroup
Collapsible facet group that renders checkbox, color, or price filtering controls.
Best for
Import
import { FilterGroup } from "@enadhq/enad-react-sdk/client/storefront"When to use it
Use FilterGroup inside collection and search filter surfaces when one facet needs its own open-close state and option-specific control type.
Composition notes
type drives the rendered input model. Use checkbox for standard facets, color when the option is visual, and price for min-max entry. Keep the group controlled through selected and onChange so the broader filter state stays consistent.
Behavior and theming guidance
Use defaultOpen to tune the initial scan depth of the filter panel. High-value or frequently used facets can start open, while lower-priority groups can stay collapsed.
Examples
Live examples you can edit directly in the sandbox.
Checkbox facet group
Use checkbox groups for option lists where several values can stay selected at once.
Price range group
Use the price type when the filter needs simple min-max inputs instead of a long list of fixed buckets.
Component Sets
Preview the first example across the available component-set presets to compare tone, spacing, and structural defaults.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | No description yet. |
| type | string | — | No description yet. |
| options | FilterOption[] | — | No description yet. |
| selected | FilterSelection | — | No description yet. |
| onChange | (selected: FilterSelection) => void | — | No description yet. |
| defaultOpen | boolean | true | No description yet. |
| labels | string | — | No description yet. |
| className | string | — | No description yet. |