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 | 3.123.1 |
Stable3.123.1View in LexiconCHANGELOG
Property | Description |
---|---|
active boolean | Property to define whether the DropDown menu is expanded or not (controlled). |
ariaLabels {
selectColor: string;
selectionIs: string;
} | Labels for the aria attributes The default value is { selectColor: 'Select a color', selectionIs: 'Color selection is {0}', } |
colors Array<string> | List of color hex values |
defaultActive boolean | Property to set the default value of active (uncontrolled).The default value is false |
defaultValue string | Property to set the default value (uncontrolled). The default value is 'FFFFFF' |
disabled boolean | Flag for adding ColorPicker in disabled state |
dropDownContainerProps React.ComponentProps<
typeof ClayDropDown.Menu
>['containerProps'] | Props to add to the DropDown container. |
label string | The label describing the collection of colors in the menu |
messages {
close: string;
customColor: string;
} | Message for aria-label |
name string | The input attribute for name |
onActiveChange InternalDispatch<boolean> | Callback function for when active state changes (controlled). |
onChange InternalDispatch<string> | Callback that is called when the value changes (controlled). |
onColorsChange (val: Array<string>) => void | Callback for when the list of colors change |
onValueChange Deprecated(val: string) => void | Callback for when the selected color changes
@deprecated since v3.51.0 - use onChange instead. |
predefinedColors Array<string> | |
showHex boolean | Determines if the hex input should render The default value is true |
showPalette boolean | Flag for showing and disabling the palette of colors.
This defaults to true The default value is true |
showPredefinedColorsWithCustom boolean | The default value is false |
small boolean | Flag to indicate if input-group-sm class should
be applied to ClayInput.Group |
splotchTitle string | The title of the Main Splotch component |
spritemap string | Path to the location of the spritemap resource. |
title string | Title to describe the color picker form element |
useNative boolean | Determines if the native color picker should be used The default value is false |
value string | The value property sets the current value (controlled). |