Skip to content
Compositions

ProductSpecificationsSelector

Renders the stack of variant/filter selector fields for a product so a product configuration can be refined interactively. The component renders only the field stack - no card, heading, or CTA chrome. Compose those around it (a Card, your own title) when a surface calls for a titled panel.

Terracotta
Sage
Sand

Usage

import { ImageRenderProps, ProductSpecificationsSelector, ProductSpecificationsSelectorProps } from "@instruments/materia-ui/compositions/product-specifications-selector";

Best practices

  • Drive it as a controlled component: it renders from filters and emits onFilterChange(key, value) - it holds no internal filter state, so persist the value and feed it back.

  • It renders nothing when there are no variantOptions dimensions and no siblings with images - supply siblings/siblingsWithAttributes so single-colourway products still show a fallback thumbnail.

  • Pass renderImage (wrapping next/image) in Next.js; the default is a plain <img>. The component ships bare - wrap it in a Card with your own heading when a panel is wanted.

Props

PropTypeDefaultDescription
filters(required)Record<string, string | null>
onFilterChange(required)(key: string, value: string | null) => void
onSiblingSelect(siblingId: string) => void

Callback when a sibling is selected (fallback variant selection)

renderImage(props: ImageRenderProps) => ReactNode

Custom image renderer (e.g., for next/image). Defaults to standard img element.

selectedProductIdstring

Currently selected product ID (for highlighting in sibling selector)

siblingsSibling[]

Sibling products for fallback variant selection when variantOptions is empty

siblingsWithAttributesSiblingWithAttributes[]

Full sibling data with variant attributes for computing compatible options on hover

variantOptions(required)Partial<Record<"pattern" | "length" | "width" | "size" | "colorName" | "finish" | "substrate" | "finishType", import("./product-specifications-types").VariantOption[]>>

Also exports

  • interfaceImageRenderProps
  • interfaceProductSpecificationsSelectorProps

Composition

Builds on

Label, RadioCardGroup, Stack, VariantSelector