HTML Control
The html type renders rich formatted HTML content within the form. All HTML passes through a 6-layer XSS sanitisation pipeline before rendering. Use it for multi-paragraph instructions, formatted notices, bullet lists, links, and embedded content.
Minimal Example
{
"id": "privacy-notice",
"type": "html",
"order": 1,
"width": "full",
"description": "<p>By submitting this form you agree to our <a href='https://example.com/privacy'>Privacy Policy</a>.</p>"
}Content Source: the description Field
Like the label control, the html control uses the description field as its content. The content is the raw HTML string to render:
{
"id": "terms-block",
"type": "html",
"description": "<h3>Terms of Use</h3><p>These terms govern your use of this service. Please read carefully before proceeding.</p><ul><li>You must be 18 years or older</li><li>Your data will be stored securely</li><li>You may withdraw consent at any time</li></ul>"
}Allowed HTML Tags
The sanitiser whitelists 17 HTML tags. All other tags are stripped before rendering:
| Category | Allowed Tags |
|---|---|
| Text structure | p, br, hr, div, span |
| Headings | h1, h2, h3, h4, h5, h6 |
| Inline formatting | strong, em, u, code |
| Lists | ul, ol, li |
| Links | a (href, target, rel only) |
| Blocks | blockquote, pre |
| Media | img (src, alt, width, height only) |
Allowed Attributes
Only safe attributes are preserved. All event attributes (onclick, onload, etc.) are stripped regardless of which tag they appear on:
| Tag | Allowed Attributes |
|---|---|
a | href, target, rel |
img | src, alt, width, height |
* (all) | class, id (stripped of dangerous patterns) |
style | Stripped entirely (inline styles are blocked) |
| Event handlers | Stripped entirely (onclick, onload, etc.) |
Settings Reference
| Setting | Type | Default | Description |
|---|---|---|---|
sanitize | boolean | true | Must always be true. Cannot be disabled. |
padding | none | sm | md | lg | none | Inner padding around the rendered HTML block |
background | boolean | false | Render on a card background with border |
Rich Formatted Notice
{
"id": "eligibility-notice",
"type": "html",
"width": "full",
"order": 1,
"settings": {
"background": true,
"padding": "md"
},
"description": "<h3>Eligibility Requirements</h3><p>To qualify for this programme you must meet <strong>all</strong> of the following criteria:</p><ul><li>Resident of an eligible jurisdiction</li><li>Annual income below $75,000</li><li>Not currently enrolled in a competing scheme</li></ul><p>If you are unsure of your eligibility, <a href='https://example.com/check' target='_blank'>use our eligibility checker</a> before proceeding.</p>"
}Code Block Display
Use <pre><code> for displaying technical content such as API keys, configuration snippets, or example values:
{
"id": "api-example",
"type": "html",
"description": "<p>Use the following endpoint for testing:</p><pre><code>POST https://api.example.com/v1/submit\nContent-Type: application/json\nAuthorization: Bearer YOUR_TOKEN</code></pre>"
}Conditional HTML Blocks
{
"id": "high-risk-notice",
"type": "html",
"description": "<p><strong>High Risk Transaction</strong></p><p>This transaction has been flagged for additional review. A compliance officer will contact you within 24 hours.</p>",
"settings": { "background": true, "padding": "md" },
"visibilityRule": "values['risk-score'] > 80"
}text or textarea control in view mode.
Full Security Details
See HTML Control Security for the complete 6-layer XSS prevention model including DOMPurify configuration, custom sanitiser hooks, CSP headers, and the full list of blocked attack vectors.