Swatch Picker React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import SwatchPicker from "./SwatchPicker";

export default function Example() {
  return (
    <SwatchPicker
      items={[
        {
          "value": "clay",
          "label": "Clay",
          "color": "#bd8b75"
        },
        {
          "value": "linen",
          "label": "Linen",
          "color": "#ded0b8"
        },
        {
          "value": "moss",
          "label": "Moss",
          "color": "#929b83"
        },
        {
          "value": "ink",
          "label": "Ink",
          "color": "#637483"
        },
        {
          "value": "lilac",
          "label": "Lilac",
          "color": "#b5a1c7"
        }
      ]}
      defaultValue={"clay"}
      label={"Choose your finish"}
      size={48}
    />
  );
}

Using Swatch Picker

Supply each swatch's value, label, and colour through items. The labels should distinguish choices without relying on colour alone.

Use value with onValueChange for a controlled picker, or defaultValue for local state. size determines the individual tile size.

Props

Name	Type	Required	Default	Description
items	object[]	No	[]	Array of { value, label, color, disabled? }. Values must be unique strings.
value	string	No	undefined	Optional controlled selected value.
defaultValue	string	No	undefined	Initial uncontrolled value; otherwise the first enabled item is selected.
onValueChange	function	No	undefined	Called with the selected value.
label	string	No	"Choose a colour"	Visible legend and accessible group label.
size	number	No	48	Swatch edge length in pixels, clamped to at least 28. Tiles wrap in narrow containers.
className	string	No	""	Additional classes merged with the component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing, typography, and appearance.