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

Example

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.

Accessibility

The saturation and brightness map in the custom color editor is operable from the keyboard. Focus its handle and:

• Arrow keys move one step: left and right along saturation, up and down along brightness.
• Shift + Arrow keys move ten steps at a time.
• Page Up and Page Down move brightness ten steps at a time.
• Home and End take saturation to its minimum and maximum.

The handle is a slider that reports the current saturation as its value, and both values through aria-valuetext. Its labels can be translated through the ariaLabels attribute, where the component replaces {0} with the saturation and {1} with the brightness.

<ClayColorPicker
	ariaLabels={{
		saturationAndBrightness: 'Saturation and brightness',
		saturationAndBrightnessIs: 'Saturation {0}%, brightness {1}%',
		selectColor: 'Select a color',
		selectionIs: 'Color selection is {0}',
	}}
	colors={colors}
	onColorsChange={setColors}
	onChange={setColor}
	value={color}
/>