This is the component to use whenever you need to render a banner in a form. It displays a styled message with optional title, extra HTML content, and a list of clickable links. It does not collect input — it informs the applicant or surfaces a custom error.
Read Form Rules before using this component — keys, labels, required fields, expressions, visibility, and validation all follow shared conventions.
hide expression (use messageType: "error" and required: true)| Prop | Type | Required? | Default | Description |
|---|---|---|---|---|
messageType |
"warning" \| "success" \| "info" \| "danger" \| "error" |
optional | "warning" |
Controls color and style of the banner. Set to "error" to render it as a field-level validation error |
title |
string |
optional | — | Bold heading displayed inside the banner |
message |
string |
optional | — | Body text shown below the title |
extraMessage |
string |
optional | — | Additional text shown below message. Rendered as HTML when extraMessageAsHtml is true |
extraMessageAsHtml |
boolean |
optional | false |
When true, renders extraMessage as raw HTML |
label |
string |
required | — | Always set a non-null value. Use hideLabel: true to prevent it from rendering visually |
hideLabel |
boolean |
required | — | Always set to true — prevents the label from rendering above the banner |
required |
boolean |
optional | — | Set to true only when used as a custom error message (messageType: "error") |
links |
Link[] |
optional | [] |
Clickable links displayed below the banner. See Link object below |
| Prop | Type | Required? | Description |
|---|---|---|---|
url |
string |
required | Default URL used when no locale match is found |
urlLocales |
Record<string, string> |
optional | Locale-keyed URL overrides (e.g. "en-US", "fr-FR", "rw-RW") |
name |
string |
required | Display text of the link |
selfTarget |
boolean |
optional | When true, opens the link in _self instead of the default _blank |
{
"key": "SECTION_GUIDELINES",
"type": "customsectionmessagewithlink",
"props": {
"label": "Section Guidelines",
"hideLabel": true,
"title": "Guidelines",
"message": "This is a message about this section",
"messageType": "warning",
"extraMessage": "<ol><li>Download the form here</li><li>Fill all required fields</li></ol>",
"extraMessageAsHtml": true,
"links": [
{
"url": "http://example.com/form.pdf",
"urlLocales": {
"en-US": "http://example.com/en/form.pdf",
"fr-FR": "http://example.com/fr/form.pdf",
"rw-RW": "http://example.com/rw/form.pdf"
},
"name": "Download Form",
"selfTarget": false
},
{
"url": "http://example.com/guide",
"name": "View Guide"
}
]
}
}
Use messageType: "error" and required: true to make the component behave as a field-level error. Control when it appears via the hide expression.
{
"key": "ELIGIBILITY_ERROR",
"type": "customsectionmessagewithlink",
"props": {
"label": "Eligibility Error",
"hideLabel": true,
"message": "You are not eligible to apply for this service based on your current status.",
"messageType": "error",
"required": true,
"links": [],
"extraMessage": "",
"extraMessageAsHtml": true
},
"expressions": {
"hide": "model?.STATUS !== 'INELIGIBLE'"
}
}
Use the attachment upload API to upload a file and obtain a file key, then use that key as the url in the link object.
POST /attachment-template-controller — provide the file, its name, and the changeRequestIdGET /file-manager-controller — use the file key returned from the uploadlabel to null or omitting it — always provide a non-null string value.hideLabel: true — without it, the label text renders visibly above the banner.messageType to a value outside the allowed set — only warning, success, info, danger, and error are valid.extraMessage without setting extraMessageAsHtml: true — the tags will render as raw text.required: true with a messageType other than "error" — required is only meaningful in error mode.name or url from a link object — both are required for each entry in links.type is customsectionmessagewithlinklabel is set to a non-null stringhideLabel: true is present in propsmessageType is one of: warning, success, info, danger, errorextraMessageAsHtml is true whenever extraMessage contains HTML tagslinks has both url and nameselfTarget is set only when the link must open in the same taburlLocales is populated only when locale-specific URLs differ from the default urlrequired: true is set only when using the component as a custom error messagehide expression is defined when the banner should appear conditionally