New to Kendo UI for Vue? Start a free 30-day trial
Vue FlatColorPicker Overview
Updated on Sep 9, 2026
The FlatColorPicker component provides a flat view for the ColorGradient and the ColorPalette components and adds a header and footer. The header contains the current color, the previously selected color, and a button that clears the selected value. The footer contains two buttons that you can configure to apply or cancel the selection.
The following example demonstrates the FlatColorPicker in action.
Loading ...
Key Features
- Disabled FlatColorPicker—You can render a disabled FlatColorPicker by setting a single property and keep it disabled until certain requirements are met.
- FlatColorPicker customization—You can customize the rendering of the FlatColorPicker header and footer.
Support and Learning Resources
- FlatColorPicker Homepage
- Getting Started with the Kendo UI Vue Inputs
- API Reference of the FlatColorPicker Component
- Getting Started with Kendo UI for Vue - JavaScript (Online Guide)
- Getting Started with Kendo UI for Vue - TypeScript (Online Guide)
- Getting Started with Kendo UI for Vue - JavaScript + Options API (Online Guide)
- Getting Started with Kendo UI for Vue - TypeScript + Options API (Online Guide)
- Getting Started with Kendo UI for Vue - Nuxt 3 (Online Guide)
- Virtual Classroom (Training Course for Registered Users)
- FlatColorPicker Forum
- Knowledge Base
- Kendo UI Productivity Tools extension for VS Code