Components
    • Animation
    • Barcodes
    • Buttons
    • Charts
    • Common Utilities
    • Conversational UI
    • Data Grid
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gantt
    • Gauges
    • Indicators
    • Inputs
    • Labels
    • Layout
    • ListBox
    • ListView
    • Mapbeta
    • Notification
    • PDF Processing
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeView
    • Upload
    Sample Applications
    Styling & Themes
    Common Features
    Project Setup
    Changelog

ColorPickerProps

Represents the props of the KendoReact ColorPicker component.

NameTypeDefaultDescription

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.

ariaLabelledBy?

string

Identifies the element(s) which will label the component.

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" | "outline" | "solid"

solid

Configures the fillMode of the ColorPicker.

The available options are:

  • solid
  • outline
  • flat
  • nullDoes not set a fillMode className.

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.

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" | "medium" | "full" | "large"

medium

Configures the roundness of the ColorPicker.

The available options are:

  • small
  • medium
  • large
  • full
  • nullDoes not set a rounded className.

size?

"null" | "small" | "medium" | "large"

medium

Configures the size of the ColorPicker.

The available options are:

  • small
  • medium
  • large
  • nullDoes not set a size className.

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

Sets the view which the ColorPicker will render in the popup (see example).

Methods

onActiveColorClick

The event handler that will be fired when the left side of the ColorPicker is clicked.

Parameters

event

ColorPickerActiveColorClick

onBlur

The event handler that will be fired when ColorPicker is blurred.

Parameters

event

ColorPickerBlurEvent

onChange

The event handler that will be fired when the user edits the value.

Parameters

event

ColorPickerChangeEvent

onFocus

The event handler that will be fired when ColorPicker is focused.

Parameters

event

ColorPickerFocusEvent