Skip to main content
A two-column operator panel with Start and Emergency Stop buttons, an Enable Production toggle, a setpoint slider, and device name and pressure fields

An operator panel built from the components on this page: buttons, a toggle, a slider, and entry fields

Input components let operators act: start a line, set a speed, type a value. One rule applies to all of them: input components don’t publish by themselves — the ON <EVENT> DO handler does.
Like a steering wheel, not a speedometer. Display widgets read signals; these widgets send them — every interaction ends in a publish back to the broker.
One section per control, each with its rendered result, the code, and then the property reference.

​
Button

A button that publishes a command when clicked:
A Start Production button on a dashboard

A button that publishes a start command when clicked

Events: ON CLICK DO

​
Toggle / Switch

Binary on/off control. switch is an alias for toggle.
The toggle reflects the bound topic live — publish true or false to it and the switch follows:
An Enable Production toggle switched on

A labeled toggle reflecting the live state of its bound topic

Bind targets: STATE — Events: ON TOGGLE DO
Write-back is broken in the current HUB build. ON TOGGLE DO PUBLISH ... WITH STATE fires, but the message payload is the literal text {{STATE}} instead of the toggle state (WITH VALUE behaves the same). Until this is fixed, use the toggle as a live state display and trigger commands from a button.

​
Slider

Range input for numeric values.
The slider tracks its bound topic live — the thumb moves as new values arrive:
A temperature setpoint slider set partway along its 0 to 200 degree range

A 0–200 °C setpoint slider tracking the live value of its bound topic

Bind targets: VALUE — Events: ON CHANGE DO
Write-back is broken in the current HUB build. ON CHANGE DO PUBLISH ... WITH VALUE sends the literal text {{VALUE}} instead of the slider position, and dragging is overridden by the bound topic. Until this is fixed, use the slider as a live numeric display and set values from a number field.

​
Text Field / Input

Free text entry.
A labeled field pre-filled from its topic; typing publishes the new value:
A Device Name text field showing pump-station-1

A labeled text field pre-filled with the current value from its topic

Bind targets: VALUE — Events: ON CHANGE DO

​
Number Field

Numeric-only entry.
Accepts only numbers and publishes the limit on change:
A numeric input field for a maximum pressure limit

A numeric field that accepts only numbers and publishes the limit on change

Bind targets: VALUE — Events: ON CHANGE DO

​
Common mistakes

Text and number fields fire ON CHANGE when the value is committed — press Enter (or leave the field) after typing. Each keystroke alone does not publish.
The toggle reflects its BIND STATE topic. If nothing updates that topic, the toggle snaps back to the last bound value — make sure something (device, Action, or a test publish) updates the bound state.

​
Next Steps

Actions & events

Everything a control can do: publish, navigate, invoke, trigger, and branch.

Container components

Group controls and readouts into cards and tabs.
Last modified on August 28, 2026