ZeroTrace Desktop
UI Controls
The complete ui.* control catalog — signatures, options, handle properties, and runnable examples
Every control is one ui.* call. Each call returns a handle (a chart returns a slightly different handle — see Charts). Reading and writing a handle's .value, and flipping .disabled, .hidden, or .label, updates the panel live at any time — not just while the run is happening.
Every control also accepts align: "start" | "center" | "end" in its options, placing it within the panel's width.
| Property | Type | Does |
|---|---|---|
.value | varies by control | The current value. Reading and writing both work at any time. |
.disabled | boolean | Grays the control out and blocks user interaction. |
.hidden | boolean | Removes the control from the panel without losing its state. |
.label | string | The control's visible label — writable, updates live. |
.layout() | — | Always throws. layout is panel-level (ui.layout(...)), not per-control — this exists so the common ui.row(...).layout({...}) mistake explains itself instead of failing silently. |
Reference table
| Control | Kind | Persists across Run |
|---|---|---|
ui.title | Text and structure | — |
ui.text | Text and structure | — |
ui.divider | Text and structure | — |
ui.card | Layout container | — |
ui.row | Layout container | — |
ui.tabs | Layout container | Yes (selected tab) |
ui.button | Input | — |
ui.slider | Input | Yes |
ui.number | Input | Yes |
ui.input | Input | Yes |
ui.toggle | Input | Yes |
ui.select | Input | Yes |
ui.color | Input | Yes |
ui.swatches | Input | Yes |
ui.readout | Output | No (script-driven) |
ui.stat | Output | No (script-driven) |
ui.progress | Output | No (script-driven) |
ui.chart | Output | No (script-driven) |
ui.table | Output | No (script-driven) |
ui.badge | Output | No (script-driven) |
ui.alert | Output | No (script-driven) |
ui.code | Output | No (script-driven) |
ui.spinner | Output | No (script-driven) |
ui.layout | Panel-wide | — |
"Persists across Run" means: when the panel is user-edited (a slider you dragged, text you typed), pressing Run to apply a code change keeps that value instead of resetting it — matched by the control's kind and label. Script-driven outputs always start from whatever your code sets them to on the new run.
Title, text, divider
ui.title("My App")
ui.text("A line of description.")
ui.text("Muted helper text.", { muted: true })
ui.divider()
| Call | Options | Notes |
|---|---|---|
ui.title(text, opts?) | { align? } | A heading for the panel or a section. |
ui.text(text, opts?) | { muted?, align? } | A line of description; muted: true dims it. |
ui.divider(opts?) | { align? } | A horizontal rule to separate groups. |
Panel layout (ui.layout)
Not a control — sets options for the whole panel, not one control. Call it once, anywhere in your script.
ui.layout({ align: "center", maxWidth: 460 })
// or, to use the full available width:
ui.layout({ maxWidth: "full" })
ui.layout({ align?, maxWidth? })
align:"start" | "center" | "end"— the default alignment for controls that don't set their own.maxWidth: a pixel width for the panel, or"full"to remove the cap.