ColorPicker

Widget for selecting the color.

import ColorPicker from '@semcore/ui/color-picker';
<ColorPicker />;

ColorPickerProps

& {...}

Name	Type	Description
value	string | null	Selected color item. Should be used with `onChange` property together
onChange	(value: string, event: React.ChangeEvent) => void	Fired when user selects color item. Should be used with `value` property together
defaultValue	string | null	Default value if `value` property is not provided
colors	string[]	Array of color items. Should be used with `onColorsChange` property together
onColorsChange	(value: string[], event: React.ChangeEvent) => void	Fired when user changes color items. Should be used with `colors` property together
displayLabel	boolean	Shows label `A` as text color icon inside all color items

ColorPicker.Trigger

The wrap over the <Dropdown.Trigger/> component.

import ColorPicker from '@semcore/ui/color-picker';
<ColorPicker.Trigger />;

ColorPicker.Popper

The wrap over the <Dropdown.Popper/> component.

import ColorPicker from '@semcore/ui/color-picker';
<ColorPicker.Popper />;

ColorPicker.Colors

List of colors in ColorPicker.

import ColorPicker from '@semcore/ui/color-picker';
<ColorPicker.Colors />;

ColorsProps

& {...}

Name	Type	Description
colors	Array<string | null>	Array of color items

ColorPicker.Item

WARNING

ColorPicker.Item is deprecated. Use ColorPicker.Colors.

One unit of <ColorPicker.Colors />. ColorPicker.Item is a swatch preview that allows a user to see what color is currently selected.

import ColorPicker from '@semcore/ui/color-picker';
<ColorPicker.Item />;

ItemProps

& {...}

Name	Type	Description
value	string | null	Color item in hexadecimal format.
displayLabel	boolean	Shows label `A` as text color icon inside all color items
editable	boolean	Property enabling the ability to remove a color item on click
selected	boolean	Shows if color item is selected
onRemove	React.MouseEventHandler	Fired with color item when user clicks on the close icon

PaletteManager

Part of ColorPicker that provides the ability to add and remove custom colors to the palette.

import { PaletteManager } from '@semcore/ui/color-picker';
<PaletteManager />;

PaletteManagerProps

Name	Type	Description
colors	string[]	Array of color items. Should be used with `onColorsChange` property together
defaultColors	string[]	Default value if `colors` property is not provided
onColorsChange	(value: string[], event: React.ChangeEvent) => void	Fired when user adds or removes color items. Should be used with `colors` property together

PaletteManager.Colors

List of colors in PaletteManager.

import { PaletteManager } from '@semcore/ui/color-picker';
<PaletteManager.Colors />;

ColorsCustomProps

& & {...}

Name	Type	Description
onPlusButtonClick	React.MouseEventHandler	Fired when user clicks on the plus icon in Palette Manager - focuses the input component

PaletteManager.Item

WARNING

PaletteManager.Item is deprecated. Use PaletteManager.Colors.

One unit of <PaletteManager.Colors />. PaletteManager.Item is a swatch preview that allows a user to see what color is currently selected.

import { PaletteManager } from '@semcore/ui/color-picker';
<PaletteManager.Item />;

ItemProps

& {...}

Name	Type	Description
value	string | null	Color item in hexadecimal format.
displayLabel	boolean	Shows label `A` as text color icon inside all color items
editable	boolean	Property enabling the ability to remove a color item on click
selected	boolean	Shows if color item is selected
onRemove	React.MouseEventHandler	Fired with color item when user clicks on the close icon

ColorPicker.InputColor

Input for adding colors in hexadecimal format.

import { PaletteManager } from '@semcore/ui/color-picker';
<PaletteManager.InputColor />;

InputColorProps

& {...}

Name	Type	Description
value	string	Text value of input
defaultValue	string | null	Default value if `value` property is not provided
state	"normal" | "valid" | "invalid"	Uncontrolled visual state of input
colors	string[]	Array of color items
onAdd	(value: string, event: React.MouseEvent | React.KeyboardEvent) => void	Fired with entered value when user clicks on the check icon or hits `Enter` or `Space`
onStateChange	(state: "normal" | "valid" | "invalid") => void	Handle changes of state