Variant Picker
Product option selector with named colour swatches, a size grid with sold-out strikes and low-stock hints, a segmented fit choice, rolling per-variant price and a notify-me state.
Preview
Waxed field jacket
Organic cotton, water-resistant finish
Colour Stone
Fit
Size L
Only 2 leftOnly 2 left.
Try Stone in XL, or Ember for the sale price
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| colors | { value; label; swatch }[] | — | Colour swatches; swatch is any CSS colour, ideally a token. |
| sizes | { value; label }[] | — | Size grid; sold-out sizes are struck, low-stock ones get a dot. |
| fits / fitLabel | { value; label }[] / string | — / "Fit" | Optional segmented choice: fit, material, length. |
| variants | { color; size; fit?; price; compareAt?; stock }[] | — | Every sellable combination; drives price and stock. |
| value / defaultValue / onValueChange | { color?; size?; fit? } | first colour and fit | The selection, controlled or not. |
| lowStockAt | number | 3 | Stock at or below this shows Only n left. |
| onAdd | (variant: Variant) => void | — | Add to cart with the chosen variant. |
| onNotify | (selection) => void | — | Notify me action for a sold-out variant. |
| currency / locale | string | "USD" / "en-US" | Money formatting. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.