ColorPicker

The ColorPicker component provides an intuitive interface for selecting colors with support for multiple color formats and preset color sets.

Overview

ColorPicker provides a complete color selection solution with:

• Multiple color formats (hex, rgb, hsl)
• Color input field
• Copy to clipboard
• Preset color sets
• Configurable placement and triggers
• Animation options

Basic Usage

{
  uuid: "my-color-picker",
  name: "theme_color",
  component_type: "color-picker",
  input: {
    label: { type: "string", value: "Primary Color" }
  },
  inputHandlers: {
    value: `return $primaryColor || '#3b82f6';`
  },
  event: {
    onChange: `
      $primaryColor = EventData.value;
    `
  }
}

Component Inputs

Property	Type	Default	Description
value	string	''	Current color value
label	string	''	Label text
helperText	string	''	Helper text
size	string	'default'	Size: 'small', 'default', 'large'
trigger	string	'click'	Trigger mode: 'click', 'hover'
placement	string	'auto'	Picker placement
animation	string	'fade'	Animation: 'none', 'fade', 'slide', 'scale'
format	string	'hex'	Color format: 'hex', 'rgb', 'hsl'
closeOnSelect	boolean	false	Close picker on selection
closeOnOutsideClick	boolean	true	Close on outside click
closeOnEscape	boolean	true	Close on Escape key
showInput	boolean	true	Show color input field
showCopyButton	boolean	true	Show copy button
inputPlaceholder	string	'Enter color'	Input placeholder
defaultColorSets	array	[]	Preset color options
state	string	'default'	State: 'default', 'disabled'

---

Events

onChange

Triggered: When color value changes

EventData:

{
  value: string  // Selected color value
}

onOpen / onClose

Triggered: When picker opens/closes

---

Common Patterns

Theme Color Customization

{
  component_type: "color-picker",
  input: {
    label: { type: "string", value: "Primary Color" },
    format: { type: "string", value: "hex" }
  },
  inputHandlers: {
    value: `return $theme?.primaryColor || '#3b82f6';`,
    defaultColorSets: `
      return [
        '#ef4444', '#f97316', '#eab308', '#22c55e',
        '#06b6d4', '#3b82f6', '#8b5cf6', '#ec4899'
      ];
    `
  },
  event: {
    onChange: `
      $theme = {
        ...$theme,
        primaryColor: EventData.value
      };
      await ApplyTheme($theme);
    `
  }
}

Background Color Selector

{
  component_type: "color-picker",
  input: {
    label: { type: "string", value: "Background" },
    closeOnSelect: { type: "boolean", value: true }
  },
  inputHandlers: {
    value: `return $elementStyle?.backgroundColor || '#ffffff';`
  },
  event: {
    onChange: `
      $elementStyle = {
        ...$elementStyle,
        backgroundColor: EventData.value
      };
    `
  }
}

Color Palette Builder

{
  component_type: "color-picker",
  input: {
    showCopyButton: { type: "boolean", value: true }
  },
  inputHandlers: {
    value: `return $currentPaletteColor || '';`
  },
  event: {
    onChange: `
      const color = EventData.value;
      $currentPaletteColor = color;

      if (!$colorPalette.includes(color)) {
        $colorPalette = [...$colorPalette, color];
      }
    `
  }
}

---

See Also

• TextInput Component - Text input
• Select Component - Dropdown selection
• IconPicker Component - Icon selection