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.

Stable 3.3.3 View in Lexicon CHANGELOG

Types of Color Picker

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

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.
Small: use the small API to size the color picker input to match other small inputs.

Custom Colors

Code Sample (expand to see it)

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
showPalette	boolean	false	true	Flag for showing and disabling the palette of colors. This defaults to true
small	boolean	false		Flag to indicate if `input-group-sm` class should be applied to `ClayInput.Group`
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
Sizes

This requires custom javascript.

Example

Background Color

Code Sample (expand to see it)

<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="active btn clay-color-btn"
							title="#B2EDFF"
							style="background-color:#B2EDFF;"
							tabindex="-1"
						></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

Code Sample (expand to see it)

<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>

Code Sample (expand to see it)

<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="active btn clay-color-btn"
				title="#B2EDFF"
				style="background-color:#B2EDFF;"
				tabindex="-1"
			></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>

Code Sample (expand to see it)

<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="active btn clay-color-btn"
				title="#B2EDFF"
				style="background-color:#B2EDFF;"
				tabindex="-1"
			></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>

Sizes

Form Group Sm

Code Sample (expand to see it)

<div class="form-group form-group-sm">
	<label for="_xc5ufh2gj">Form Group Sm</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="_xc5ufh2gj"
					title="#B2EDFF"
					type="button"
					style="background-color:#B2EDFF;"
				></button>
				<div
					aria-labelledby="_xc5ufh2gj"
					class="clay-color-dropdown-menu dropdown-menu"
				></div>
			</div>
		</div>
		<div class="input-group-append input-group-item">
			<input
				aria-label="Color selection is B2EDFF"
				class="form-control input-group-inset input-group-inset-before"
				id="clayColor3"
				type="text"
				value="B2EDFF"
			/>
			<label
				class="input-group-inset-item input-group-inset-item-before"
				for="clayColor3"
			>
				#
			</label>
		</div>
	</div>
</div>

Input Group Sm

Code Sample (expand to see it)

<div class="form-group">
	<label for="_a37tcs84w">Input Group Sm</label>
	<div class="clay-color input-group input-group-sm">
		<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="_a37tcs84w"
					title="#B2EDFF"
					type="button"
					style="background-color:#B2EDFF;"
				></button>
				<div
					aria-labelledby="_a37tcs84w"
					class="clay-color-dropdown-menu dropdown-menu"
				></div>
			</div>
		</div>
	</div>
</div>