ColorSwatches
The ColorSwatches component allows a user to select a color from a list of colors. It displays the colors as swatches, which are small circles filled with the respective color. The user can click on a swatch to select that color.
It is most commonly used in admin tools to allow a business owner to select a color for a product or category.
Quick Start
- Installation
npm install @adaptavant/eds-core- Import
import { ColorSwatches } from '@adaptavant/eds-core';
Size
Use the size prop to set the diameter (in px) of each color swatch. The default is 32.
const COLORS = [
'#1A1F23',
'#DA3A00',
'#FF8A35',
'#FFC700',
'#8849B1',
'#096CC3',
'#C5A981',
'#9C9C9C',
'#038F86',
'#26912A',
];
const [color, setColor] = React.useState('#096CC3');
return(
<ColorSwatches
colors={COLORS}
onChange={setColor}
value={color}
size="32"
/>
);Number of rows
Use the rows prop to set the number of rows for the color swatches. The default is 1.
const COLORS = [
'#1A1F23',
'#DA3A00',
'#FF8A35',
'#FFC700',
'#8849B1',
'#096CC3',
'#C5A981',
'#9C9C9C',
'#038F86',
'#26912A',
];
const [color, setColor] = React.useState('#096CC3');
return(
<ColorSwatches
colors={COLORS}
onChange={setColor}
value={color}
rows={3}
/>
);Custom Swatches
Use the customFirstSwatch and customLastSwatch props to add custom elements before/after the core list of options.
const COLORS = [
'#1A1F23',
'#DA3A00',
'#FF8A35',
'#FFC700',
'#8849B1',
'#096CC3',
'#C5A981',
'#9C9C9C',
'#038F86',
'#26912A',
];
const [color, setColor] = React.useState('#096CC3');
return(
<ColorSwatches
colors={COLORS}
inputName="color-picker"
size="24"
customFirstSwatch={
<ColorSwatch
background="#ABCABC"
classNames={{ swatchRing: 'border-2 border-dashed border-input-critical' }}
inputName="first"
onChange={setColor}
size="24"
value={color}
/>
}
onChange={setColor}
value={color}
/>
);ColorSwatch
The ColorSwatch component can used as a standalone primitive to build a color picker component, or to use for the customFirstSwatch and customLastSwatch swatches in the ColorSwatches component. This component is internally used by ColorSwatches component.
const [color, setColor] = React.useState('#5eb0f8');
return (
<>
<ColorSwatch
background="#3ead85"
onChange={setColor}
size="20"
value={color}
/>
<ColorSwatch
background="#5eb0f8"
onChange={setColor}
size="24"
value={color}
/>
<ColorSwatch
background="#512fb1"
onChange={setColor}
size="28"
value={color}
/>
<ColorSwatch
background="#ea556c"
onChange={setColor}
size="32"
value={color}
/>
<ColorSwatch
background="#ce3b93"
onChange={setColor}
size="36"
value={color}
/>
<ColorSwatch
background="#ce3b93"
onChange={setColor}
size="40"
value={color}
/>
</>
);Style API
Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.
Please refer to the Style API documentation for more insights.
ColorSwatch parts
{/* Styling the swatch and swatch ring parts */}
<ColorSwatch
background="#7298f8"
classNames={{
swatchRing: 'border-2 border-dotted border-[#7298f8] rounded-xl',
swatch: 'rounded-lg'
}}
value="#7298f8"
/>Stylable Parts | Description |
|---|---|
radio | The radio control of the swatch, not usually visible to the user. |
swatchRing | The focus/selected ring around the swatch. |
swatch | The swatch with backgound color. |