ColorPickerProps
Represents the props of the KendoReact ColorPicker component.
Definition
Package:@progress/kendo-react-inputs
Properties
Sets the initially active view in the popup when both 'gradient' and 'palette' views are rendered.
Use with the views property.
'gradient''
adaptive?
boolean
Providing different rendering of the popup element based on the screen dimensions.
false
adaptiveSubtitle?
string
Specifies the text that is rendered as subtitle in the adaptive popup(action sheet).
Applicable only when adaptive is set to true.
adaptiveTitle?
string
Specifies the text that is rendered as title in the adaptive popup(action sheet).
Applicable only when adaptive is set to true.
If not provided, the title will be the same as the label.
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?
"flat" | "solid" | "outline"
Configures the fillMode of the ColorPicker.
The available options are:
- solid
- outline
- flat
- null—Does not set a fillMode
className.
solid
Configures the FlatColorPicker that is displayed in the ColorPicker popup via views property.
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.
Configures the ColorPalette that is displayed in the ColorPicker popup (see example).
Configures the popup of the ColorPicker.
rounded?
"small" | "medium" | "large" | "none" | "full"
Configures the roundness of the ColorPicker.
The available options are:
- small
- medium
- large
- full
undefined (theme-controlled)
showButtons?
boolean
Specifies whether action buttons (Apply/Cancel) will be rendered in the popup footer.
true
size?
"small" | "medium" | "large"
Configures the size of the ColorPicker.
The available options are:
smallmediumlarge
undefined (theme-controlled)
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.
Deprecated. Use views prop instead.
Specifies the views that will be rendered in the popup. By default both the gradient and palette views will be rendered.
['gradient', 'palette']
webMcp?
boolean | WebMcpProps
Enables Web MCP tool registration for this component.
Requires a parent WebMcpProvider from @progress/kendo-react-webmcp.