ColorSwatchPicker

A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.

size

density

rounding

import {ColorSwatchPicker, ColorSwatch} from '@react-spectrum/s2';

<ColorSwatchPicker defaultValue="#f00">
  <ColorSwatch color="#f00" />
  <ColorSwatch color="#0f0" />
  <ColorSwatch color="#00f" />
  <ColorSwatch color="#ff0" />
  <ColorSwatch color="#f0f" />
  <ColorSwatch color="#0ff" />
</ColorSwatchPicker>

Value

Use the value or defaultValue prop to set the selected color, and onChange to handle selection changes. The value may be a string or Color object, parsed using the parseColor function.

Selected color: rgb(225, 29, 72)

import {ColorSwatchPicker, ColorSwatch, parseColor} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';

function Example() {
  let [value, setValue] = useState(parseColor('#e11d48'));

  return (
    <>
      <ColorSwatchPicker value={value} onChange={setValue}>
        <ColorSwatch color="#e11d48" />
        <ColorSwatch color="#f97316" />
        <ColorSwatch color="#eab308" />
        <ColorSwatch color="#22c55e" />
        <ColorSwatch color="#3b82f6" />
        <ColorSwatch color="#8b5cf6" />
        <ColorSwatch color="#ec4899" />
      </ColorSwatchPicker>
      <pre className={style({font: 'body'})}>Selected color: {value.toString('rgb')}</pre>
    </>
  );
}

Color swatches must be unique

Equivalent colors in different color spaces are considered duplicates. For example, the values #f00, hsl(0, 100%, 50%), and hsb(0, 100%, 100%) are all the same color. This is required for predictable selection behavior.

API

<ColorSwatchPicker>
  <ColorSwatch />
</ColorSwatchPicker>

ColorSwatchPicker

Name	Type	Default
`children`	`ReactNode`	Default: —
The ColorSwatches within the ColorSwatchPicker.
`density`	`'compact' \| 'regular' \| 'spacious'`	Default: `'regular'`
The amount of padding between the swatches.
`size`	`'XS' \| 'S' \| 'M' \| 'L'`	Default: `'M'`
The size of the color swatches.
`rounding`	`'none' \| 'default' \| 'full'`	Default: `'none'`
The corner rounding of the color swatches.
`styles`	`StylesProp`	Default: —
Spectrum-defined styles, returned by the `style()` macro.

`value`	`string \| Color`	Default: —
The current value (controlled).
`defaultValue`	`string \| Color`	Default: —
The default value (uncontrolled).
`onChange`	`(value: Color) => void`	Default: —
Handler that is called when the value changes.