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

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.

Edit this page on GitHub

Contributors

Table of Contents

Example
Types