VariantSelector
Multi-axis product option picker for size, color, material, and other variant dimensions.
Best for
Import
import { VariantSelector } from "@enadhq/enad-react-sdk/client/storefront"When to use it
Use VariantSelector when the product has one or more structured option axes and the visitor needs to make a valid combination before purchasing.
It is especially useful when unavailable or low-stock choices need to stay visible but clearly marked.
Composition notes
axes defines the option groups, selected holds the current per-axis choice, and onChange updates a single axis at a time. Keep axis names stable because they are the keys in the selection map.
Each option can also carry:
state—available,low-stock,out-of-stock, orunavailablemeta— short supporting copy such as "Few left" or "Back soon"
When the product model is more complex, make sure the selector state stays tightly connected to inventory and variant-resolution logic.
Behavior and theming guidance
Unavailable options should still explain the range without pretending to be silently removed. Use state and meta when the storefront needs to signal low stock, upcoming restocks, or store-only availability while keeping the selection surface stable.
Use the optional labels object when the state messaging needs to match the storefront tone.
Keep option labels short and consistent. Long or mixed naming makes multi-axis selection feel harder than it is.
Connected companion
Use VariantSelector when the page already owns the variant axes, the selected state, and the variant-resolution logic.
Use SearchProductVariantSelector from @enadhq/enad-react-sdk/client/search when the page wants the SDK to resolve a search-backed product and drive the variant-selection model for the existing presentational selector.
Examples
Live examples you can edit directly in the sandbox.
Size and color axes
Use one axis per decision dimension so the visitor can understand the selection model at a glance.
Component Sets
Preview the first example across the available component-set presets to compare tone, spacing, and structural defaults.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| axes | VariantAxis[] | — | Array of variant axes (e.g. Size, Color), each with its own set of options |
| selected | Record<string, string> | — | Map of axis name to the currently selected option id |
| onChange | (axis: string, optionId: string) => void | — | Callback fired when the user selects an option, receiving the axis name and option id |
| labels | string | {} | Overridable UI text strings for the selector |
| className | string | No description yet. |