Color Picker

yarn add @clayui/color-picker

Color picker lets users select a color from a predefined palette, specify a color via its hexadecimal value, sample a color, and explore color values to create a custom color variation.

React Component
CSS / Markup

Stable 3.2.5 View in Lexicon CHANGELOG

Types of Color Picker

Color Picker is delivered in 3 different ways: default colors, custom colors and native.

Default colors: a predefined list of colors to the dropdown that is not allowed to change or manipulate.
Custom colors: using the colors API in conjunction with onColorsChange enables the user to modify colors and add new ones.
Native: use the useNative API when the color picker is being used in a native environment, it changes to the browser default color picker.

Custom Colors

import ClayColorPicker from '@clayui/color-picker';

import ClayColorPicker from '@clayui/color-picker';

const Component = () => {
  const [customColors, setCustoms] = useState(["008000", "00FFFF", "0000FF"]);
  const [color, setColor] = useState(customColors[0]);

  return (
    <ClayColorPicker
      colors={customColors}
      label="Custom Colors"
      name="colorPicker2"
      onColorsChange={setCustoms}
      onValueChange={setColor}
      showHex={true}
      spritemap={spritemap}
      title="Custom Colors"
      value={color}
    />
  );
};

render(<Component />);

const Component = () => {
  const [customColors, setCustoms] = useState(["008000", "00FFFF", "0000FF"]);
  const [color, setColor] = useState(customColors[0]);
  return (
    <ClayColorPicker
      colors={customColors}
      label="Custom Colors"
      name="colorPicker2"
      onColorsChange={setCustoms}
      onValueChange={setColor}
      showHex={true}
      spritemap={spritemap}
      title="Custom Colors"
      value={color}
    />
  );
};
render(<Component />);

We recommend that you review the use cases in the Storybook.

API

Property	Type	Required	Default	Description
ariaLabels	{ selectColor: string; selectionIs: string; }	false	{ selectColor: 'Select a color', selectionIs: 'Color selection is {0}', }	Labels for the aria attributes
colors	Array<string>	false		List of color hex values
disabled	boolean	false		Flag for adding ColorPicker in disabled state
label	string	false		The label describing the collection of colors in the menu
name	string	false		The input attribute for name
onColorsChange	(val: Array<string>) => void	false		Callback for when the list of colors change
onValueChange	(val: string) => void	false	() => {}	Callback for when the selected color changes
showHex	boolean	false	true	Determines if the hex input should render
spritemap	string	false		Path to the location of the spritemap resource.
title	string	false		Title to describe the color picker form element
useNative	boolean	false	false	Determines if the native color picker should be used
value	string	false	'FFFFFF'	Value of the selected color hex
onBlur		false	() => {}

Example
Variations

This requires custom javascript.

Example

Background Color

<label for="clayColor1DropdownToggle">Background Color</label>
<div class="clay-color input-group">
	<div class="input-group-item input-group-item-shrink input-group-prepend">
		<div class="input-group-text">
			<button
				aria-expanded="false"
				aria-haspopup="true"
				aria-label="Select a color"
				class="btn clay-color-btn dropdown-toggle"
				data-toggle="dropdown"
				id="clayColor1DropdownToggle"
				title="#B2EDFF"
				type="button"
				style="background-color:#B2EDFF;"
			></button>
			<div
				aria-labelledby="clayColor1DropdownToggle"
				class="clay-color-dropdown-menu dropdown-menu"
				x-placement="bottom-start"
				style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(8px, 32px, 0px);"
			>
				<div class="clay-color-swatch">
					<div class="clay-color-swatch-item">
						<button
							class="btn clay-color-btn"
							title="#000000"
							style="background-color:#000000;"
						></button>
					</div>
				</div>
				<div class="clay-color-header">
					<span class="component-title">Custom Colors</span>
					<button
						class="component-action"
						id="claySiteShowView2"
						type="button"
					>
						<svg
							class="lexicon-icon lexicon-icon-drop"
							focusable="false"
							role="presentation"
						>
							<use href="/images/icons/icons.svg#drop" />
						</svg>
					</button>
				</div>
				<div class="clay-color-swatch">
					<div class="clay-color-swatch-item">
						<button
							class="btn clay-color-btn focus"
							title="#B2EDFF"
							style="background-color:#B2EDFF;"
						></button>
					</div>
					<div class="clay-color-swatch-item">
						<button
							class="btn clay-color-btn clay-color-btn-bordered"
							title="#FFFFFF"
							style="background-color:#FFFFFF;"
						></button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="input-group-append input-group-item">
		<input
			aria-label="Color selection is #B2EDFF"
			class="form-control"
			id="clayColor1"
			type="text"
			value="#B2EDFF"
		/>
	</div>
</div>

Variations

<div class="clay-color-dropdown-menu dropdown-menu show">
	<div class="clay-color-swatch">
		<div class="clay-color-swatch-item">
			<button
				class="btn clay-color-btn"
				title="#FFB1B1"
				style="background-color:#FFB1B1;"
			></button>
		</div>
		...
	</div>
</div>

<div class="clay-color-dropdown-menu dropdown-menu show">
	<div class="clay-color-swatch">
		<div class="clay-color-swatch-item">
			<button
				class="btn clay-color-btn"
				title="#000000"
				style="background-color:#000000;"
			></button>
		</div>
	</div>
	<div class="clay-color-header">
		<span class="component-title">Custom Colors</span>
		<button class="component-action" type="button">
			<svg
				class="lexicon-icon lexicon-icon-drop"
				focusable="false"
				role="presentation"
			>
				<use href="/images/icons/icons.svg#drop" />
			</svg>
		</button>
	</div>
	<div class="clay-color-swatch">
		<div class="clay-color-swatch-item">
			<button
				class="btn clay-color-btn focus"
				title="#B2EDFF"
				style="background-color:#B2EDFF;"
			></button>
		</div>
		<div class="clay-color-swatch-item">
			<button
				class="btn clay-color-btn clay-color-btn-bordered"
				title="#FFFFFF"
				style="background-color:#FFFFFF;"
			></button>
		</div>
	</div>
</div>

<div class="clay-color-dropdown-menu dropdown-menu show">
	<div class="clay-color-header">
		<span class="component-title">Custom Colors</span>
		<button class="close" type="button">
			<svg
				class="lexicon-icon lexicon-icon-times"
				focusable="false"
				role="presentation"
			>
				<use href="/images/icons/icons.svg#times" />
			</svg>
		</button>
	</div>
	<div class="clay-color-swatch">
		<div class="clay-color-swatch-item">
			<button
				class="btn clay-color-btn focus"
				title="#B2EDFF"
				style="background-color:#B2EDFF;"
			></button>
		</div>
		<div class="clay-color-swatch-item">
			<button
				class="btn clay-color-btn"
				title="#45EDC5"
				style="background-color:#45EDC5;"
			></button>
		</div>
	</div>
	<div class="clay-color-map-group">
		<div
			class="clay-color-map-hsb clay-color-map"
			style="background-color:rgb(180,237,254);"
		>
			<button
				class="clay-color-pointer clay-color-map-pointer"
				style="top: 0px; left: 130px;background-color: rgb(180, 237, 254);"
				type="button"
			></button>
		</div>
		<div class="clay-color-map-values">
			<div class="form-group">
				<div class="input-group">
					<div class="input-group-item">
						<input
							class="form-control input-group-inset input-group-inset-before"
							id="clayColor3Red"
							type="text"
							value="180"
						/>
						<label
							class="input-group-inset-item input-group-inset-item-before"
							for="clayColor3Red"
						>
							R
						</label>
					</div>
				</div>
			</div>
			<div class="form-group">
				<div class="input-group">
					<div class="input-group-item">
						<input
							class="form-control input-group-inset input-group-inset-before"
							id="clayColor3Green"
							type="text"
							value="237"
						/>
						<label
							class="input-group-inset-item input-group-inset-item-before"
							for="clayColor3Green"
						>
							G
						</label>
					</div>
				</div>
			</div>
			<div class="form-group">
				<div class="input-group">
					<div class="input-group-item">
						<input
							class="form-control input-group-inset input-group-inset-before"
							id="clayColor3Blue"
							type="text"
							value="254"
						/>
						<label
							class="input-group-inset-item input-group-inset-item-before"
							for="clayColor3Blue"
						>
							B
						</label>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="clay-color-range clay-color-range-hue">
		<button
			class="clay-color-pointer clay-color-range-pointer"
			type="button"
			style="left: 98px; background-color: rgb(180,237,254);"
		></button>
	</div>
	<div class="clay-color-footer">
		<div class="form-group">
			<input class="form-control" type="text" value="#B2EDFF" />
		</div>
		<div class="form-group">
			<div class="input-group">
				<div class="input-group-item">
					<input
						class="form-control input-group-inset input-group-inset-before"
						id="hexInput"
						type="text"
						value="B2EDFF"
					/>
					<label
						class="input-group-inset-item input-group-inset-item-before"
						for="hexInput"
					>
						#
					</label>
				</div>
			</div>
		</div>
	</div>
</div>