Skip to main content

Label Widget Overview

The Label Widget displays read-only text content in Buildocs UI Engine. It supports plain text, HTML markup, and dynamic value substitution using @fieldname placeholders that reference other fields in the same form.

The Label Widget does not store any data and does not fire events to the backend.

Behavior​

  • Renders static or dynamic text on the canvas
  • Supports inline HTML tags for formatting (bold, italic, links, etc.)
  • Substitutes @fieldname placeholders with the live value of the referenced form field
  • Updates automatically when the referenced field's value changes

Dynamic Placeholders​

Use @fieldname syntax inside the label text to insert the current value of another form field.

Text: "Order total: @orderTotal"
→ Renders as: "Order total: 1,250.00"

Text: "Welcome, @firstName @lastName!"
→ Renders as: "Welcome, John Smith!"

Multiple placeholders can appear in a single label.

HTML Support​

The label text is rendered as HTML. Standard inline tags can be used to format the content:

<b>Important:</b> Please review the details before submitting.
<br/>
Contact: <a href="mailto:support@example.com">support@example.com</a>
caution

Only use trusted HTML content in label text. Avoid user-supplied values in HTML attributes to prevent XSS vulnerabilities.

Adding to a Row​

  1. Open your form in the Form Builder
  2. Add a Row to the canvas if one is not already in place — see Building Layouts
  3. Locate the Label widget in the component palette
  4. Drag the widget into an empty Row segment
  5. Open the Properties Panel and enter the label text
info

Label widgets must be placed inside a Row segment. They cannot be dropped directly onto the canvas.

Next Steps​

  • Properties — full reference for all label settings