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.

View in StorybookView in Playroom

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"
	/>
);
View in Playroom

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}
	/>
);
View in Playroom

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}
	/>
);
View in Playroom

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}
    />
  </>
);
View in Playroom

API Reference​

ColorSwatches

ColorSwatch

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"
/>
View in Playroom
Stylable PartsDescription
radioThe radio control of the swatch, not usually visible to the user.
swatchRingThe focus/selected ring around the swatch.
swatchThe swatch with backgound color.

ColorSwatches parts​

// Styling the swatch from swatches parent component.
// Helpful to style the ColorSwatch internally rendered as part of ColorSwatches.

const COLORS = ["#1A1F23", "#DA3A00", "#FF8A35", "#FFC700"];
const [color, setColor] = React.useState("#096CC3");
return (
  <ColorSwatches
    colors={COLORS}
    className="border-2 border-secondary px-2 py-3 gap-3"
    classNames={{
      swatchRoot: "cursor-default",
      swatchRing: "border-2 border-dotted border-[#7298f8] rounded-xl",
      swatch: "rounded-md",
    }}
    onChange={setColor}
    value={color}
    size="32"
  />
);
View in Playroom

We can apply styles to the internal ColorSwatch component used within ColorSwatches. All stylable parts remain the same as those available in ColorSwatch.

Note: The root stylable part of ColorSwatch is exposed as swatchRoot in the ColorSwatches component.