Color Picker

View in Lexicon

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
use	`import ColorPicker from '@clayui/color-picker';`

Table of Contents

Example
Types
API Reference

Example

Open Sandbox

import {Provider} from '@clayui/core';
import ColorPicker from '@clayui/color-picker';
import React, {useState} from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	const [customColors, setCustoms] = useState(['008000', '00FFFF', '0000FF']);
	const [color, setColor] = useState(customColors[0]);

	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<ColorPicker
					colors={customColors}
					label="Custom Colors"
					name="colorPicker2"
					onChange={setColor}
					onColorsChange={setCustoms}
					showHex={true}
					title="Custom Colors"
					value={color}
				/>
			</div>
		</Provider>
	);
}

Types

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.

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

API Reference

ColorPicker

({ active, ariaLabels, colors, defaultActive, defaultValue, disabled, dropDownContainerProps, label, messages, name, onActiveChange, onChange, onColorsChange, onValueChange, predefinedColors, showHex, showPalette, showPredefinedColorsWithCustom, small, splotchTitle, spritemap, title, useNative, value, ...otherProps }: IProps) => JSX.Element

Parameters

Properties

active

boolean | undefined

Property to define whether the DropDown menu is expanded or not (controlled).

ariaLabels

{ selectColor: string; selectionIs: string; } | undefined= {"selectColor":"Select a color","selectionIs":"Color selection is {0}"}

Labels for the aria attributes

colors

Array<string> | undefined

List of color hex values

defaultActive

boolean | undefined

Property to set the default value of active (uncontrolled).

defaultValue

string | undefined= "FFFFFF"

Property to set the default value (uncontrolled).

disabled

boolean | undefined

Flag for adding ColorPicker in disabled state

dropDownContainerProps

IBaseProps | undefined

Props to add to the DropDown container.

label

string | undefined

The label describing the collection of colors in the menu

messages

{ close: string; customColor: string; } | undefined

Message for aria-label

name

string | undefined

The input attribute for name

onActiveChange

InternalDispatch<boolean> | undefined

Callback function for when active state changes (controlled).

onChange

InternalDispatch<string> | undefined

Callback that is called when the value changes (controlled).

onColorsChange

((val: Array<string>) => void) | undefined

Callback for when the list of colors change

Deprecated

onValueChange

((val: string) => void) | undefined

Callback for when the selected color changes

predefinedColors

Array<string> | undefined

showHex

boolean | undefined= true

Determines if the hex input should render

showPalette

boolean | undefined= true

Flag for showing and disabling the palette of colors. This defaults to true

showPredefinedColorsWithCustom

boolean | undefined

small

boolean | undefined

Flag to indicate if input-group-sm class should be applied to ClayInput.Group

splotchTitle

string | undefined

The title of the Main Splotch component

spritemap

string | undefined

Path to the location of the spritemap resource.

title

string | undefined

Title to describe the color picker form element

useNative

boolean | undefined

Determines if the native color picker should be used

value

string | undefined

The value property sets the current value (controlled).

Returns

Element

Edit this page on GitHub

Contributors

Matuzalém Teles, Bryce Osterhaus, Diego Nascimento, Krešimir Čoko, Patrick Yeo

Last edited May 12, 2025 at 7:38:19 PM

Table of Contents

Example
Types
API Reference