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.

installyarn add @clayui/color-picker
versionNPM Version
useimport ColorPicker from '@clayui/color-picker';

Table of Contents

Example

Open on CodeSandboxOpen 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

Edit this page on GitHub

Table of Contents