Variant Picker
Commerce · VariantPicker
Pick a product option: colour swatches or text pills (sizes, materials).
Props: label, type ("color" for swatches), options (strings or {value, label, color, disabled}), value / defaultValue, onChange.
- The legend repeats the current choice ("Colour Sky") so swatches don't need text.
- Sold-out options stay visible but struck through and disabled, so people know the size exists.
Props
VariantPicker
| Prop | Type | Notes |
|---|---|---|
label | string | Required |
type? | "color" | |
options | (string | { value: string; label?: string; color?: string; disabled?: boolean })[] | Required |
value? | string | |
defaultValue? | string | |
onChange? | (v: string) => void | |
className? | string | Extra class on the root element. |
style? | CSSProperties | Inline style on the root element. |