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.41.0 View in Lexicon CHANGELOG

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
dropDownContainerProps	React.ComponentProps< typeof ClayDropDown.Menu >['containerProps']	false		Props to add to the DropDown container.
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
predefinedColors	Array<string>	false
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
showPredefinedColorsWithCustom	boolean	false	false
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