Form Input Controls

Every input control is an immutable record bound to a value. When the Editor macro generates a form it picks these controls for you based on property types and attributes — but each control is equally usable on its own inside any container. This page shows each one live.

All input controls derive from FormControlBase and share the same fluent surface:

Method	Purpose
`WithLabel(object)`	Field label shown above/beside the input
`WithDisabled(object)`	Disable interaction
`WithRequired(object)`	Mark as required
`WithPlaceholder(object)`	Hint text when empty

In a real layout area the Data argument is usually a JsonPointerReference into the area's data store (see Data Binding); in these standalone demos it is a plain value.

Checkbox and Switch

CheckBoxControl binds a boolean to a classic checkbox; SwitchControl is the same boolean as a toggle, with optional state messages.

Controls.Stack
    .WithView(Controls.CheckBox(true).WithLabel("Send me release notes"))
    .WithView(Controls.CheckBox(false).WithLabel("Enable experimental features"))
    .WithView(Controls.Switch(true)
        .WithLabel("Live updates")
        .WithCheckedMessage("Streaming")
        .WithUncheckedMessage("Paused"))

Date and Time

DateTimeControl renders a date picker bound to a DateTime value. The Editor macro selects it automatically for DateTime properties.

Controls.Stack
    .WithView(Controls.DateTime(DateTime.Today.AddDays(14))
        .WithLabel("Review deadline"))
    .WithView(Controls.DateTime(new DateTime(2026, 1, 1))
        .WithLabel("Effective from"))

Text Area

TextAreaControl is the multi-line counterpart of Controls.Text — use it for notes, descriptions, and anything longer than a single line.

new TextAreaControl(
        "Ordered 25 units on 2026-06-28.\n" +
        "Awaiting delivery confirmation from the supplier.")
    .WithLabel("Order notes")
    .WithRows(4)

List Selection: Select, Combobox, Listbox

Three controls cover single-selection from a list of Option<T> values. They share the same (data, options) shape and differ only in presentation:

Control	Presentation	Reach for it when…
`Controls.Select`	Closed dropdown	The default — compact, familiar
`Controls.Combobox`	Dropdown with free-text filtering	The list is long enough to search
`Controls.Listbox`	Always-open list	The choice should stay visible

var currencies = new[]
{
    new Option<string>("CHF", "Swiss Franc (CHF)"),
    new Option<string>("EUR", "Euro (EUR)"),
    new Option<string>("USD", "US Dollar (USD)"),
    new Option<string>("GBP", "British Pound (GBP)")
};

Controls.Stack
    .WithView(Controls.Select("CHF", currencies).WithLabel("Reporting currency (Select)"))
    .WithView(Controls.Combobox("EUR", currencies).WithLabel("Trade currency (Combobox)"))
    .WithView(Controls.Listbox("USD", currencies).WithLabel("Settlement currency (Listbox)"))

Radio Group

RadioGroupControl shows every option at once as radio buttons. The third argument is the value type name (used to type the selection client-side) — "String" for string options.

var riskProfiles = new[]
{
    new Option<string>("Conservative", "Conservative — capital preservation"),
    new Option<string>("Balanced",     "Balanced — mixed growth and income"),
    new Option<string>("Dynamic",      "Dynamic — long-term growth")
};

Controls.RadioGroup("Balanced", riskProfiles, "String")
    .WithLabel("Investment risk profile")

Mesh Node Picker

MeshNodePickerControl selects a mesh node and stores its PATH. Scope the candidate set with query syntax — here it offers the pages of this documentation area:

Controls.MeshNodePicker("Doc/GUI/DataGrid")
    .WithQueries("namespace:Doc/GUI scope:descendants nodeType:Markdown")
    .WithMaxResults(10)
    .WithLabel("Pick a documentation page")

This is the standard control whenever content references other content — never hand-build a select over node paths.

Signature Pad

SignaturePadControl is the hand-drawn signature of a paper contract: a canvas the viewer signs on with a finger, a pen or the mouse, over a signature line. The bound value is the drawn signature as a PNG data URL (data:image/png;base64,…), empty while nothing has been drawn. Done pushes the image into the bound stream — never each stroke — and Clear empties it. A value that is already set renders as the stored image, so a signature that was given shows where it was given. Made for a phone or a tablet as much as for a desktop.

Controls.Stack
    .WithView(Controls.SignaturePad("")
        .WithLabel("Signature")
        .WithPlaceholder("Sign here")
        .WithWidth(480).WithHeight(160)
        .WithPenColor("#1a237e"))

Method	Purpose	Default
`WithWidth(int)` / `WithHeight(int)`	Drawing size in CSS pixels	480 × 160
`WithPenColor(string)`	Pen colour (any CSS colour)	`#1a237e`
`WithPlaceholder(object)`	The hint under the signature line	localized Sign here
`WithClearButton(object)` · `WithClearButton()`	Offer the Clear button (bindable, like `WithPenColor`)	`true`

The two buttons, the hint and the canvas's accessible name are catalog keys (signaturePad.*), so a German reader is handed Hier unterschreiben, Löschen, Fertig.