Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

• Import path: @enadhq/enad-react-sdk/client/storefront.
• Live playground: /components/commerce/filter-group.

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.

Contract scope

• Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
• Public import: @enadhq/enad-react-sdk/client/storefront.
• Playground route: /sandbox?component=FilterGroup.
• Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes