Create wrapping <div> elements by putting content inside pairs of :::. The content inside can be any valid Markdown, such as headings, paragraphs, lists, form fields, etc. Class names and other attributes are supported via [...] (see above). Moreover, you can bind one or more fields to a <div> element by adding the names of the fields inside {$...$} (separated by spaces), and placing this within the [...]. This means that whenever the value of a binded field changes, the content inside the <div> will be automatically re-rendered.
The templating is done using Nunjucks, so its entire list of features such as if-else statements, loops, filters, etc. are fully supported. You can also bind a single field to a <span> element using {$ field $}. This is obviously not as flexible, but it is simple, and can be used inside paragraphs, headings, list items, etc.
Further reading: Data-binding - Docs
Markdown
product* = SelectBox(
| question = Product | options = T-Shirts, Socks
| selected = T-Shirts | subfield
)
price* = NumberInput(
| question = Price | unitEnd = $ | subfield | min = 1
)
quantity* = NumberInput(
| question = Quantity | subfield | min = 1
)
[.col-4]
Selected: {$ product $}
::: [.col-8 .text-end .xs:text-start {$ price quantity $}]
{% if price and quantity -%}
Total: ${{ price }} × {{ quantity }} = ${{ price * quantity }}
{% else -%}
Total: Set price and quantity
{% endif %}
:::