Template Variable Picker

ProNew

A tree of data fields that inserts {{field.path}} into a message template at the caret and previews the message with sample data. Use this when people write emails or notifications with merge fields.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

defaultValue

Guide and examples

When to use it

Use it for email and notification template editors, document merge and any text that mixes fixed words with data fields.

Do not use it for rich-text editors with their own mention menus, or when fields come from free input.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`fields`	`TreeNode<Field>[]`	-	Field groups with leaves; a leaf's id is its path and `data.sample` is the preview value.
`defaultValue`	`string`	`""`	The starting template.
`onValueChange`	`(template) => void`	-	The text changed.

Accessibility

Insert works from the keyboard (Enter on a field) and with a button; the caret ends after the inserted token and focus returns to the message.
Each insertion is announced; the preview is a labelled region.
Groups only open and close; they cannot be inserted.

Testing

The pattern ships with a Testing Library test (template-variable-picker.test.tsx) that covers template rendering, inserting at the caret and over a selection, and Enter.

Guide and examples

When to use it

Use it for email and notification template editors, document merge and any text that mixes fixed words with data fields.

Do not use it for rich-text editors with their own mention menus, or when fields come from free input.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`fields`	`TreeNode<Field>[]`	-	Field groups with leaves; a leaf's id is its path and `data.sample` is the preview value.
`defaultValue`	`string`	`""`	The starting template.
`onValueChange`	`(template) => void`	-	The text changed.

Accessibility

Insert works from the keyboard (Enter on a field) and with a button; the caret ends after the inserted token and focus returns to the message.
Each insertion is announced; the preview is a labelled region.
Groups only open and close; they cannot be inserted.

Testing

The pattern ships with a Testing Library test (template-variable-picker.test.tsx) that covers template rendering, inserting at the caret and over a selection, and Enter.