• What is KendoReact
  • Getting Started
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Formupdated
    • Ganttupdated
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Map
    • Notification
    • OrgChartnew
    • PDF Processing
    • PDFViewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting
Components / Inputs / API / ColorPickerProps / 

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.

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.

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—Does not set a size className.

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

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

In this article

Not finding the help you need?

Contact Support