Color Picker
A colour picker exposing the chosen colour as a CSS string, for the times an operator — not the author — decides what something looks like.
Reach for it when you need:
- Letting an operator recolour a trend series or an overlay
- A colour field inside a Form, stored through a Named Query
Component name: ColorPicker · Category: Input
In the palette: Pick a color — exposes the chosen CSS color string on its value
Properties
Any property can be bound to a tag, another component's property, or a query.
| Property | Type | Default | Description |
|---|---|---|---|
value | color | #3b82f6 | The chosen color as a CSS string (#rrggbb, #rrggbbaa or rgba(...)) — reflects the selection, and bindable. |
mode | enum | popover | popover = a compact swatch field that opens the picker on click; inline = the picker itself, always visible, filling the widget. Inline wants a taller box (about 240x320). Options: popover · inline. |
defaultValue | color | #3b82f6 | What the Reset button restores. Leave blank and Reset becomes Clear (empties the value). |
alpha | boolean | true | Offer the transparency slider. Off, only opaque colors can be picked. |
showValue | boolean | true | Show the editable color string — beside the swatch in popover mode, inside the panel in inline mode. |
showReset | boolean | true | Show the reset button (on the control, and in the picker popover). |
showPresets | boolean | true | Show the quick-pick swatch row inside the picker. |
presets | array | [] | Quick-pick swatches — your own palette (e.g. the plant's equipment-state colors). Leave empty for the standard set. |
placeholder | string | #rrggbb | Hint shown in the color field while it is empty (popover mode). |
title | string | Color | — |
showTitle | boolean | true | — |
titleSize | number | 13 | — |
shadow | boolean | true | Show a subtle drop-shadow on the control. Turn off for a flat look. |
disabled | boolean | false | — |
style | style | {} | Custom CSS properties |
Events
Attach event actions to these in the Event Manager.
| Event | Label | Group | Payload |
|---|---|---|---|
click | Click | Mouse | The DOM event. |
dblclick | Double click | Mouse | The DOM event. |
contextmenu | Right click | Mouse | The DOM event. |
mouseenter | Mouse enter | Mouse | The DOM event. |
mouseleave | Mouse leave | Mouse | The DOM event. |
contextmenu fires your configured actions at runtime only — in LiveView and in preview. On the Designer canvas the right-click is captured to open the Event Manager, so testing it there will not run your actions. Test right-click in preview.
Notes
The value is a CSS colour string, so it can be bound straight into the colour property of another component, or written to a tag. It round-trips in whatever notation it is given — a value stored as rgba(...) stays rgba(...), a hex value stays hex — so binding it to a property that expects one form will not silently rewrite the other. Set defaultValue to whatever the screen should fall back to and the reset button restores exactly that; leave it blank and reset instead clears the value. Dragging the gradient commits ONE value when the gesture settles, not one per frame, so it is safe to bind directly to a tag.