> ## Documentation Index
> Fetch the complete documentation index at: https://docs.insight.nobly.dk/llms.txt
> Use this file to discover all available pages before exploring further.

# Form components

> Reference for the components a form template can use — KeywordField, KeywordValue, KeywordGroup, SaveButton, and the layout 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.

```html theme={null}
<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](/forms/templates#the-render-scope).

```html theme={null}
<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.                                                                     |

```html theme={null}
<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:

```html theme={null}
<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.

```html theme={null}
<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.                                                                                                                                  |

```html theme={null}
<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. |

```html theme={null}
{{#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.             |

```html theme={null}
<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.               |

```html theme={null}
<Tabs defaultValue="visit">
  <Tab value="visit" label="Visit">…</Tab>
  <Tab value="findings" label="Findings">…</Tab>
</Tabs>
```

## Where to read next

<Card title="Administration" icon="gear" href="/forms/administration" horizontal>
  Permissions, what users need, and how form documents behave across the product.
</Card>

<Card title="Templates and syntax" icon="code" href="/caseflow/templates" horizontal>
  The shared template engine: conditionals, loops and expressions.
</Card>