Text Components

Each text component takes its content as a value prop, and also renders any children after value. Both value and string children support {variableName} interpolation against the widget's variables. Interpolated text is escaped rather than interpreted as HTML, so a value such as <strong>Hello</strong> appears as text. Unknown variable tokens stay visible as written.

Title

Renders an <h3> heading.

Prop	Type	Default	Description
value	string	—	Heading text. Supports {variable} interpolation.
size	"xs" | "sm" | "md" | "lg"	"lg"	Font size (16 / 18 / 20 / 24px).
weight	"semibold" | "bold"	"semibold"	Font weight (600 / 700).

Text

Renders a <p> for body copy.

Prop	Type	Default	Description
value	string	—	Body text. Supports {variable} interpolation.
color	"secondary"	—	When set, renders in muted gray instead of the default near-black.
size	"sm" | "md"	unset	sm renders at 13px. md renders at 14px in rawHtml and 15px in remote-dom; unset renders at 15px.

Caption

Renders a <span> for small, muted helper text (fixed size, muted gray).

Prop	Type	Description
value	string	Caption text. Supports {variable} interpolation.

Label

Renders a <label>, typically paired with a form input.

Prop	Type	Description
value	string	Label text. Supports {variable} interpolation.
fieldName	string	Emits for="<fieldName>". HTML label association requires a matching input id; the built-in form components emit name without automatically adding that id.

{
  "component": "Col",
  "props": { "gap": 4 },
  "children": [
    { "component": "Label", "props": { "value": "Email", "fieldName": "email" } },
    { "component": "Input", "props": { "name": "email", "type": "email", "placeholder": "you@example.com" } }
  ]
}