• Introduction
  • Getting Started
  • Vue 2 End of Support
  • Native Components
    • Animation
    • Buttons
    • Chartsupdated
    • Conversational UInew
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gauges
    • Grid
    • Icons
    • Indicators
    • Inputs
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Notification
    • PDF Processing
    • Popup
    • Progress Bars
    • Scheduler
    • ScrollView
    • Tooltip
    • TreeList
    • TreeView
    • Upload
  • Wrapper Components
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • FAQ
  • Troubleshooting
Components / Inputs / API / ColorPickerProps / 
New to Kendo UI for Vue? Start a free 30-day trial

ColorPickerProps

Represents the props of the Kendo UI for Vue 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" | string

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.

gradientSettings?

ColorGradientProps

Configures the ColorGradient that is displayed in the ColorPicker popup.

icon?

string

Defines the name of an existing icon in the Kendo UI for Vue theme. (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.

modelRgbaValue?

string

The model rgba value of the ColorPicker.

modelValue?

string

Specifies the model value of the ColorPicker.

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" | string

medium

Configures the roundness of the ColorPicker.

The available options are:

  • small
  • medium
  • large
  • full
  • null—Does not set a rounded className.

selectedView?

number

Sets the ColorPicker selected view index. The default is 0.

showButtons?

boolean

Specifies whether action buttons will be rendered in the footer.

showClearButton?

boolean

Specifies whether clear button will be rendered in the header.

showPreview?

boolean

Specifies whether preview and revert color boxes will be rendered in the header.

size?

"null" | string

medium

Configures the size of the ColorPicker.

The available options are:

  • small
  • medium
  • large
  • null—Does not set a size className.

svgIcon?

SVGIcon

Defines an SVGIcon to be rendered within the ColorPicker button.

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.

view?

string

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

In this article

Not finding the help you need?

Contact Support