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

PropDefaultDescription
ariaLabelPrefix?_string
Used as a prefix for the aria-label of each swatch
colors_string[]
A list of colors (hex codes) for the user to pick from
customFirstSwatch?_ReactNode
Allows the consumer to provide a custom element for the first swatch
customLastSwatch?_ReactNode
Allows the consumer to provide a custom element for the last swatch
inputName?_string
Used as the HTML 'name' attribute for each swatch input
onChange?_(value: string) => void
Callback function that is called when the color changes
rows?1number
The number of rows to display
size'32''20' | '24' | '28' | '32' | '36' | '40'
The width and height of the options
value_string
The currently selected 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"
/>
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.