Form components

Form templates use a small, fixed set of components. The keyword components bind to the document type’s keywords; the layout components are the ones Caseflow templates use too. Anything else — Caseflow’s EditableField, RelationPicker, object searches, action strings — is not available in a form template, and the lint reports it. Write components as tags: <KeywordField name="Site" />, or <CollapsibleSection title="Visit">…</CollapsibleSection> for components with children. Use className for Tailwind classes on a component and class on plain HTML. style attributes are not supported.

Binding a keyword

Every keyword component names its keyword in one of two ways:

Prop	Use
`name`	The keyword type’s name as configured on the document type, for example `name="Inspection date"`.
`keywordTypeId`	The keyword type’s ID, for example `keywordTypeId="202"`. Use it when the name cannot be written as a prop value — it contains quotes, `>` or `/` — or when it would be read as a number or as `true`/`false`.

Exactly one of the two is required. A keyword that is not assigned to the document type is reported by the lint and rendered as unknown. The keyword type decides the input — text, number, date picker, value list — the template does not choose it.

KeywordField

An input for one keyword. In preview templates it renders read-only.

Prop	Type	Required	Notes
`name` / `keywordTypeId`	`string`	One of them	The keyword to bind.
`label`	`string`	No	Label above the field. Defaults to the keyword name.
`placeholder`	`string`	No	Placeholder while the field is empty.
`disabled`	`boolean`	No	Show the value without allowing edits.
`hideLabel`	`boolean`	No	Render the input without its label.
`allowMultiple`	`boolean`	No	Offer + and − to add and drop values on a keyword that allows several. Defaults to what the keyword allows; `false` forces a single value.
`className`	`string`	No	Tailwind classes for the field’s container.

A required keyword shows the required marker and blocks saving while empty. A keyword hidden by configuration, or by a conditional rule for the current values, is not rendered at all. Inside a KeywordGroup, the field binds to the keyword of that row.

<KeywordField name="Site" label="Site" placeholder="Site or address" />
<KeywordField keywordTypeId="203" label="Inspector" disabled="true" />

KeywordValue

Read-only display of one keyword’s formatted value, with an optional label. Several values are shown comma-separated.

Prop	Type	Required	Notes
`name` / `keywordTypeId`	`string`	One of them	The keyword to show.
`label`	`string`	No	Label before the value.
`emptyText`	`string`	No	Text shown when the keyword has no value.
`className`	`string`	No	Tailwind classes.

For a value inside running text — a heading, a sentence, an attribute — use the {{Keyword}} placeholder instead; see the render scope.

<KeywordValue name="Result" label="Result" emptyText="Not yet assessed" />

KeywordGroup

Scopes its children to a keyword group. For a multi-instance group it repeats the children once per row, with add and remove controls in create and update templates; for a single-instance group it renders the one row.

Prop	Type	Required	Notes
`name` / `groupId`	`string`	One of them	The keyword group’s name, or its ID for names that cannot be written as a prop value.
`addLabel`	`string`	No	Label of the add-row button.
`className`	`string`	No	Tailwind classes.

<KeywordGroup name="Findings" addLabel="Add finding">
  <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
    <KeywordField name="Finding" />
    <KeywordField name="Severity" />
  </div>
</KeywordGroup>

To lay rows out yourself in a preview template, iterate the group in the scope instead:

<table class="w-full text-sm">
  {{#each Findings as row}}
  <tr><td>{{row.Finding}}</td><td>{{row.Severity}}</td></tr>
  {{/each}}
</table>

SaveButton

Saves the form: creates the document in a create template, saves the keywords in an update template. Not rendered in preview templates. Put exactly one in each create and update template.

Prop	Type	Required	Notes
`label`	`string`	No	Button label.
`variant`	`primary` \| `secondary` \| `outline` \| `ghost`	No	Button style.
`className`	`string`	No	Tailwind classes.

The button carries the save-time behaviour: it asks for a comment when the document type requires one, and asks before storing a document whose keywords match existing documents.

<div class="mt-6 flex justify-end">
  <SaveButton label="Create inspection" />
</div>

DateDisplay

Formats a stored date for the reader.

Prop	Type	Required	Notes
`value`	`string`	Yes	The stored date. Use the raw placeholder — `{{raw.Inspection date}}` — because `{{Inspection date}}` is already formatted and would be parsed again.
`includeTime`	`boolean`	No	Show the time part.

<DateDisplay value="{{raw.Inspection date}}" />

MessageCard

A card for a message with author and timestamp — useful for remarks, comments or notes captured in a keyword.

Prop	Type	Required	Notes
`content`	`string`	Yes	Message body.
`author`	`string`	No	Author name.
`timestamp`	`string`	No	Timestamp text.
`isDraft`	`boolean`	No	Mark the card as a draft.

{{#if Remarks}}<MessageCard content="{{Remarks}}" author="{{Inspector}}" />{{/if}}

CollapsibleSection

An expandable section with a title.

Prop	Type	Required	Notes
`title`	`string`	Yes	Section title.
`badge`	`string`	No	Badge text next to the title.
`defaultExpanded`	`boolean`	No	Start expanded.
`className`	`string`	No	Tailwind classes.

<CollapsibleSection title="Visit" defaultExpanded="true">
  …
</CollapsibleSection>

Tabs and Tab

A tabbed container whose children are Tab components.

Component	Prop	Type	Required	Notes
`Tabs`	`defaultValue`	`string`	No	Value of the initially selected tab.
`Tab`	`value`	`string`	Yes	Tab value.
`Tab`	`label`	`string`	Yes	Tab label.
`Tab`	`badge`	`string`	No	Badge text on the tab.

<Tabs defaultValue="visit">
  <Tab value="visit" label="Visit">…</Tab>
  <Tab value="findings" label="Findings">…</Tab>
</Tabs>

Getting started

Features

How we use AI

Permissions & access

Document types & keywords

Client administration

Search administration

AI search

AI document classification

AI administration

Caseflow

Form documents

Script Engine

Workflows

ContentFlow

Integrations

Mailbox importer

AI assistant access

Reporting

Retention & deletion

Release notes

Binding a keyword

KeywordField

KeywordValue

KeywordGroup

SaveButton

DateDisplay

MessageCard

CollapsibleSection

Tabs and Tab

Where to read next

Administration

Templates and syntax

​Binding a keyword

​KeywordField

​KeywordValue

​KeywordGroup

​SaveButton

​DateDisplay

​MessageCard

​CollapsibleSection

​Tabs and Tab

​Where to read next

Administration

Templates and syntax

Binding a keyword

KeywordField

KeywordValue

KeywordGroup

SaveButton

DateDisplay

MessageCard

CollapsibleSection

Tabs and Tab

Where to read next