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/material-selector.

When to use it

Use MaterialSelector when the product has a small set of mutually exclusive finish or surface options and the selector should feel more intentional than a plain dropdown.

Choose swatches for speed and density. Choose tiles when the option differences are visual enough to justify images or larger labels.

Composition notes

selected and onChange are the core state pair. variant="swatch" favors compact picking, while variant="tile" gives each option more presence.

Use title and showSelectionLabel when the surrounding product page needs a little more context about the current choice.

Use tileSize when tile mode needs a specific square footprint, and classNames when the app needs slot-level control over the root, header, group, option, or media styling.

Behavior and theming guidance

Keep the number of options reasonable. When there are too many finish choices, a different browsing pattern may be easier to use.

The selector works best when option naming, imagery, and selection feedback all line up clearly. Avoid mixing vague labels with visually similar materials.

For branded PDPs, prefer styling the tile through tileSize and classNames before rebuilding the selector locally. That keeps accessibility and interaction behavior consistent across apps.

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=MaterialSelector.
• Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes