# Variant Picker

> Pick a product option: colour swatches or text pills (sizes, materials).

Component · Commerce · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/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.

## Example

```tsx
import { VariantPicker } from "@twentyfirstmedia/pro";

export default function Preview() {
  return (
    <div
      className="tf-panel"
      style={{
        gap: 24,
      }}
    >
      <VariantPicker
        label="Colour"
        type="color"
        defaultValue="Sky"
        options={[
          {
            value: "Sky",
            label: "Sky",
            color: "#9fc3f0",
          },
          {
            value: "Ink",
            label: "Ink",
            color: "#1d1d1f",
          },
          {
            value: "Bone",
            label: "Bone",
            color: "#ece6d9",
          },
          {
            value: "Moss",
            label: "Moss",
            color: "#7d9a5e",
            disabled: true,
          },
        ]}
      />
      <VariantPicker
        label="Size"
        defaultValue="M"
        options={[
          {
            value: "XS",
            label: "XS",
            disabled: true,
          },
          "S",
          "M",
          "L",
          "XL",
        ]}
      />
    </div>
  );
}
```

## 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. |