Variant Picker

Pro

Product option picker for sizes, colours and materials. The chosen value appears beside the label, and a sold-out chip can switch to “Notify me” when tapped, so shoppers can ask for a restock.

Preview

Installation

npx @lumioui/cli add pro/variant-picker

Usage

import { VariantPickerLink, VariantPicker } from "@/components/ui/variant-picker/variant-picker";
<VariantPicker />

Also exported: VariantPickerLink.

Examples

Colour swatches

Colourway swatches on an outdoor-apparel tee, teal.

Materials

Configuring a standing desk, neutral ink.

Sizes

The size grid on a running-shoe product page, ink.

API reference

VariantPicker

Prop Type Default
options* VariantOption[] —
type "chip" | "swatch" | "tile"

Visual form. chip — sizes · swatch — colours · tile — materials/editions. Default "chip".

 —
value string | null

Controlled selected value.

 —
defaultValue string | null

Uncontrolled initial value.

 —
onValueChange
(value: string, option: VariantOption) = … (value: string, option: VariantOption) => void

Fires when an available option is chosen.

 —
onUnavailablePress (option: VariantOption) => void

Fires when a sold-out option is tapped — wire "Notify me" here.

 —
label string

Group label, e.g. "Size". The selected option's label is appended ("Colour · Sage").

 —
hideSelectedLabel boolean

Hide the selected value next to the label. Default false.

 —
headerAction React.ReactNode

Right-aligned header action, e.g. a "Size guide" link.

 —
columns number

Chip columns. 0 wraps chips at their natural width. Default 0.

 —
scroll boolean

Lay options in one horizontal scroll row instead of wrapping. Default false.

 —
swatchSize number

Swatch diameter. Default 36.

 —
notifyLabel string

Chips only: after a sold-out tap the chip's label swaps in place into this text ("Notify me") and keeps it. Default undefined — the label stays.

 —
disabled boolean —
className string —

VariantPickerLink

Prop Type Default
children* string

Link text — "Size guide", "Find my size".

 —
onPress () => void —
className string —