# Variant Picker

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.

> Composed · Pro · Forms & Inputs — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/variant-picker
```

## Import

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

## Variants

- `colors` — Colour swatches: `npx @lumioui/cli add pro/variant-picker-colors`
- `materials` — Materials: `npx @lumioui/cli add pro/variant-picker-materials`
- `sizes` — Sizes: `npx @lumioui/cli add pro/variant-picker-sizes`

## Props

### VariantPicker

| Prop | Type | Notes |
| --- | --- | --- |
| `type?` | `"chip" | "swatch" | "tile"` | Visual form. chip — sizes · swatch — colours · tile — materials/editions. Default "chip". |
| `options` | `VariantOption[]` | — |
| `value?` | `string | null` | Controlled selected value. |
| `defaultValue?` | `string | null` | Uncontrolled initial value. |
| `onValueChange?` | `(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 | Notes |
| --- | --- | --- |
| `children` | `string` | Link text — "Size guide", "Find my size". |
| `onPress?` | `() => void` | — |
| `className?` | `string` | — |

Source: https://lumioui.com/components/variant-picker