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.

install	yarn add @clayui/color-picker
version	3.120.0

Stable 3.120.0 View in Lexicon CHANGELOG

Property	Description
`active` `boolean`	Property to define whether the DropDown menu is expanded or not (controlled).
`ariaLabels` `{ selectColor: string; selectionIs: string; }`	Labels for the aria attributes The default value is { selectColor: 'Select a color', selectionIs: 'Color selection is {0}', }
`colors` `Array<string>`	List of color hex values
`defaultActive` `boolean`	Property to set the default value of `active` (uncontrolled). The default value is false
`defaultValue` `string`	Property to set the default value (uncontrolled). The default value is 'FFFFFF'
`disabled` `boolean`	Flag for adding ColorPicker in disabled state
`dropDownContainerProps` `React.ComponentProps< typeof ClayDropDown.Menu >['containerProps']`	Props to add to the DropDown container.
`label` `string`	The label describing the collection of colors in the menu
`messages` `{ close: string; customColor: string; }`	Message for aria-label
`name` `string`	The input attribute for name
`onActiveChange` `InternalDispatch<boolean>`	Callback function for when active state changes (controlled).
`onChange` `InternalDispatch<string>`	Callback that is called when the value changes (controlled).
`onColorsChange` `(val: Array<string>) => void`	Callback for when the list of colors change
`onValueChange`Deprecated `(val: string) => void`	Callback for when the selected color changes @deprecated since v3.51.0 - use `onChange` instead.
`predefinedColors` `Array<string>`
`showHex` `boolean`	Determines if the hex input should render The default value is true
`showPalette` `boolean`	Flag for showing and disabling the palette of colors. This defaults to true The default value is true
`showPredefinedColorsWithCustom` `boolean`	The default value is false
`small` `boolean`	Flag to indicate if `input-group-sm` class should be applied to `ClayInput.Group`
`splotchTitle` `string`	The title of the Main Splotch component
`spritemap` `string`	Path to the location of the spritemap resource.
`title` `string`	Title to describe the color picker form element
`useNative` `boolean`	Determines if the native color picker should be used The default value is false
`value` `string`	The value property sets the current value (controlled).