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.