ColorPickerProps

Represents the props of the KendoReact ColorPicker component.

Name	Type	Default	Description
activeView?	ColorPickerView	'gradient''	Sets the initially active view in the popup when both 'gradient' and 'palette' views are rendered. Use with the views property.
adaptive?	boolean		Providing different rendering of the popup element based on the screen dimensions.
adaptiveTitle?	string		Specifies the text that is rendered as title in the adaptive popup.
ariaDescribedBy?	string		Identifies the element(s) which will describe the component, similar to HTML aria-describedby attribute. For example these elements could contain error or hint message.
ariaLabel?	string		Represent the label of the component.
ariaLabelledBy?	string		Identifies the element(s) which will label the component.
className?	string		Sets additional classes to the ColorPicker.
defaultValue?	string		The default value of the ColorPicker (see example).
dir?	string		Represents the dir HTML attribute.
disabled?	boolean		Sets the disabled state of the ColorPicker (see example).
fillMode?	"null" | "flat" | "solid" | "outline"	solid	Configures the fillMode of the ColorPicker. The available options are: solid outline flat null—Does not set a fillMode className.
flatColorPickerSettings?	FlatColorPickerProps		Configures the FlatColorPicker that is displayed in the ColorPicker popup via views property.
gradientSettings?	ColorPickerGradientSettings		Configures the ColorGradient that is displayed in the ColorPicker popup (see example).
icon?	string		Defines the name of an existing icon in the KendoReact theme. You have to provide only the name of the icon without the k-icon or the k-i- prefixes. For example, edit-tools will be parsed to k-icon k-i-edit-tools (see example).
iconClassName?	string		The class name which displays an icon in the ColorPicker button (see example).
id?	string		Specifies the id of the component.
onActiveColorClick?	(event: ColorPickerActiveColorClick) => void		The event handler that will be fired when the left side of the ColorPicker is clicked.
onBlur?	(event: ColorPickerBlurEvent) => void		The event handler that will be fired when ColorPicker is blurred.
onChange?	(event: ColorPickerChangeEvent) => void		The event handler that will be fired when the user edits the value.
onFocus?	(event: ColorPickerFocusEvent) => void		The event handler that will be fired when ColorPicker is focused.
open?	boolean		Sets the open and close state of the ColorPicker.
paletteSettings?	ColorPickerPaletteSettings		Configures the ColorPalette that is displayed in the ColorPicker popup (see example).
popupSettings?	ColorPickerPopupSettings		Configures the popup of the ColorPicker.
rounded?	"null" | "small" | "large" | "medium" | "full"	medium	Configures the roundness of the ColorPicker. The available options are: small medium large full null—Does not set a rounded className.
size?	"null" | "small" | "large" | "medium"	medium	Configures the size of the ColorPicker. The available options are: small medium large null—This option removes the the built-in size styles of the ColorPicker. Allows for custom padding.
svgIcon?	SVGIcon		Defines the SVG icon.
tabIndex?	number		Sets the tabIndex property of the ColorPicker. Defaults to 0.
title?	string		Sets the title property of the ColorPicker.
valid?	boolean		Overrides the validity state of the component. If valid is set, the required property will be ignored. This property is part of the FormComponentProps interface.
value?	string		Specifies the value of the ColorPicker. Currently, only the RGBA format is supported.
view?	ColorPickerView		Deprecated. Use views prop instead.
views?	ColorPickerView[]	['gradient', 'palette']`	Specifies the views that will be rendered in the popup. By default both the gradient and palette views will be rendered.