Skip to content
← Inventory

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.

Product specifications

Terracotta
Oak
Sage

Usage

import { ImageRenderProps, ProductSpecificationsSelector, ProductSpecificationsSelectorProps } from "@desk/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<"length" | "pattern" | "width" | "size" | "color_name" | "finish" | "substrate" | "product_finish_type", import("./product-specifications-types").VariantOption[]>>

Also exports

  • interfaceImageRenderProps
  • interfaceProductSpecificationsSelectorProps

Composition

Builds on

Label, RadioCardGroup, Stack, VariantSelector