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';`

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

any

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

any

Callback function for when active state changes (controlled).

onChange

any

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

onColorsChange

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

Callback for when the list of colors change

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

Table of Contents

Example
Types
API Reference