Toggle button

About 4 min read

TwToggleButton · Category: Buttons

Touch panels

When the Toggle button is locked, tapping it shows the Lock Reason text. With Needs Confirmation on, the confirmation dialog carries the button caption (Confirmation). onMouseDown and onMouseUp code also runs on touch screens (Event code on touch).

Settings

These settings are in the properties panel on the right while the widget is selected. The default value is the value the widget has when it is first added to a page.

Value / Write

Setting	Type	Default	Description
On Value onValue	Value (typed)	true	Value written when Toggle/Switch is ON.
Off Value offValue	Value (typed)	false	Value written when Toggle/Switch is OFF.
Process Value processValue	Value (typed)	false	Base read/write value. When State Mode is Process Value, the visual state is computed from this value.
Action Mode actionMode	Selection	write	Write: only writes the Process Value, Link: only runs the link action, Write and Link: writes first, then runs the link. Options: write Write, link Link, writeAndLink Write and Link
State Mode stateMode	Selection	processValue	Process Value: the state is read from the tag value, Local: the state toggles only in the UI on each click (independent of the tag). Options: processValue Process Value, local Local

Behavior

Setting	Type	Default	Description
Read Only readOnly	Checkbox	On	When on, the user cannot change the value at runtime.
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.

Labels / Icons

Setting	Type	Default	Description
Icon Mode iconMode	Selection	auto	Auto: uses the image (IconSrc) first, otherwise the CSS class icon. CSS Class: class icon only. Image: IconSrc only (falls back to the class icon if empty). Options: auto Auto, class CSS Class, image Image
On Icon onIcon	Icon	check	Class icon used in ON state.
Off Icon offIcon	Icon	close	Class icon used in OFF state.
On Icon Source onIconSrc	File	—	File-based icon path used in ON state.
Off Icon Source offIconSrc	File	—	File-based icon path used in OFF state.
Hint hint	Text	—	Tooltip text shown at runtime when the pointer rests on the widget.
Icon Pos iconPos	Text	left	The icon is always shown before the text.

Appearance

Setting	Type	Default	Description
Styling Mode stylingMode	Text	outlined	Contained fills the button with color, Outlined shows only a border (default), Text shows no border or background.
Type type	Text	normal	Button color from the theme: Normal is neutral, Default uses the accent color, Success is green and Danger is red.
Button Class buttonClass	Text	—	CSS classes added to the button element.

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, onClick, onMouseDown, onMouseUp, to.type, lockReason, readOnly, needsConfirmation, processValue, onValue, offValue, onIcon, offIcon, iconMode, actionMode, stateMode, onIconSrc, offIconSrc, buttonClass, hint, iconPos, stylingMode

Common sections

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