ColorSwatchPicker
A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.
size
density
The amount of padding between the swatches.
density
rounding
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 {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 style={{fontSize: 12}}>Selected color: {value.toString('rgb')}</pre>
</>
);
}
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 |
| Default: — |
Handler that is called when the value changes. | ||