Three-state selector

About 3 min read

TwThreeStateSelector · Category: Basic

Locked look

From 2.11.0 the Three-state selector is dimmed and shows the lock when Read Only is bound to a tag whose value is true or the user lacks the permission. If a Lock Reason is set, tapping the locked selector shows it. See Locked controls.

Settings

These settings are in the properties panel on the right while the widget is selected, mostly in the Three-State Selector Settings section. The default value is the value the widget has when it is first added to a page.

Behavior

Setting	Type	Default	Description
Read Only readOnly	Checkbox	Off	When on, the selector cannot be operated at runtime. Widgets saved without this setting are read-only.
Invert Other Tag invertOtherTag	Checkbox	Off	With separate On Value and Off Value Tags, also writes the inverse boolean to the other Tag so both stay consistent.
Lock Reason lockReason	Text	—	Optional. While the control is locked at runtime (Read Only bound to a tag that is true, or a user without write permission), a tap shows this text briefly instead of the permission message, and it appears as the tooltip. Example: "Interlock: door open". A locale key is translated. Empty keeps the default behaviour.
Needs Confirmation needsConfirmation	Checkbox	Off	Asks for confirmation before the value is written to the Tag.

Values

Setting	Type	Default	Description
On Value onValue	Value (typed)	true	Value written to the Tag bound to On Value. The knob points to On when that Tag equals this value.
Off Value offValue	Value (typed)	—	Value written by the Off position. Leave empty to write the inverse of a boolean On Value to the same Tag.

Labels

Setting	Type	Default	Description
On Label labelOn	Text	AUTO	Text of the On position, shown to the right of the dial. Long texts are compressed to fit.
Labels labelVisibility	Selection	always	Visibility of the position labels. Always show: default. Hide when small: the labels are hidden when the selector is drawn smaller than 72 px and the knob grows. Hide: labels are never shown. Options: always Always show, auto Hide when small, hidden Hide
Label Style labelStyle	Text	—	Extra CSS for both labels, e.g. fill: #c00; font-size: 28px. Long labels are compressed to fit.
Off Label labelOff	Text	MAN	Text of the Off position, shown to the left of the dial. Long texts are compressed to fit.

Other settings

Setting	Type	Default	Description
Enable Flashing enableFlashing	Checkbox	Off	Makes the widget blink (an opacity pulse every second). Usually bound to an alarm condition.
Log Button logButton	Checkbox	Off	At runtime shows a chart icon when hovering the widget; clicking it adds the Tags bound to the widget to the log Tag list.

Bindings

In the Bindings (Rules) section of the properties panel, a Tag can be bound to the following properties of this widget with a Direct binding. The binding types (Direct, IntRange, FloatRange, Boolean, Bit) are the same for all widgets; they are described on the Widget Reference page.

title, visible, authorization, x, y, width, height, rotation, class, foregroundColor, backgroundColor, borderColor, borderStyle, borderWidth, borderRadius, borderTopLeftRadius, borderTopRightRadius, enableFlashing, logButton, lockReason, readOnly, labelOn, labelOff, labelVisibility, onValue, offValue, needsConfirmation, invertOtherTag

The style fields of the widget can also be bound as style.<field> (e.g. style.left, style.top).

Common sections

While this widget is selected, the properties panel also shows these common sections: General, Layout, Appearance, Bindings (Rules). These sections are described on the Page Editor page.