• 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 / FlatColorPickerProps / 

FlatColorPickerProps

Represents the properties of FlatColorPicker component.

NameTypeDefaultDescription

ariaLabel?

string

Represents the label of the FlatColorPicker component.

ariaLabelledBy?

string

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

className?

string

Sets additional classes to the FlatColorPicker.

defaultValue?

string

Sets the default color value.

disabled?

boolean

Determines whether the FlatColorPicker is disabled.

format?

"hex" | "rgba" | "rgb"

'rgb'

Sets the default input format in the gradient input editor.

header?

React.ComponentType<undefined>

Sets custom header component.

id?

string

Sets the id property of the top div element of the FlatColorPicker.

onChange?

(event: FlatColorPickerChangeEvent) => void

The event handler that will be fired when the user click the "Apply" button or on blur when the "Apply" button is not present.

onPreviewChange?

(event: FlatColorPickerChangeEvent) => void

The event handler that will be fired when the user changes the preview color.

opacity?

boolean

true

Specifies whether we should display the opacity slider to allow selection of transparency.

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.

style?

React.CSSProperties

Sets additional CSS styles to the FlatColorPicker.

tabIndex?

number

Sets the tabIndex property of the FlatColorPicker.

value?

string

Sets the color value.

view?

"ColorGradient" | "ColorPalette"

Sets the FlatColorPicker view. The default is ColorGradient.

In this article

Not finding the help you need?

Contact Support