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	0	Title font size (px). 0 = follows the size. 1.0.8
size	enum	inherit	Field height, padding, text and title size. Project default = the project's Control size (Project settings → Theme). Use md or larger on touch panels. Options: inherit · xs · sm · md · lg · xl. 1.0.8
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.

Right-click behaves differently in the Designer

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.

Size New in 1.0.8

size sets the field's height, padding, text and title on one scale shared by every field widget:

size	xs	sm	md	lg	xl
Field height	28 px	36 px	44 px	52 px	64 px
Text	12 px	13 px	14 px	16 px	18 px

The default, Project default (inherit), follows the project's Control size (Project settings → Theme), so one setting resizes every field on every screen. Set size on a widget only where it has to differ. A field, a dropdown and a button at the same size line up exactly, side by side.

titleSize now defaults to 0, which follows the size. A number you set still wins.

Fields, buttons and menus draw smaller after upgrading to 1.0.8

Before 1.0.8 these widgets had one size, what is now md (a 44 px field). The project's Control size defaults to sm (36 px), sized for desktop dashboards, and every widget whose size is Project default follows it — which is every widget in an upgraded project. On a touch panel, set Project settings → Theme → Control size to md or larger: 44 px is the touch-target minimum.