Widget Matrix

Use this document for:

• FieldType -> WidgetType compatibility
• widget examples
• widget-specific widgetProps

Related docs:

• Fields: core Field props, conditions, filters, Field.onChange, value contracts
• Relation fields: RelationTable, SelectTree, OneToMany, ManyToMany

FieldType -> WidgetType Matrix

String Widgets

Default String

<Field fieldName="name" />

URL, Email, Color

<Field fieldName="homepage" widgetType="URL" />
<Field fieldName="contactEmail" widgetType="Email" />
<Field fieldName="themeColor" widgetType="Color" />

Text

<Field fieldName="description" widgetType="Text" />

RichText

Tiptap-based WYSIWYG rich text editor. Stores and reads HTML strings.

Toolbar: bold, italic, underline, strikethrough, headings (H1–H4), bullet/ordered lists, indent/outdent, text alignment, link, image, table, horizontal rule, highlight, undo/redo.

Two-level lazy loading: read-only mode renders raw HTML without loading the editor; edit mode lazy-loads the full Tiptap editor.

<Field fieldName="content" widgetType="RichText" />

TemplateEditor

Tiptap-based template editor for designing email templates, document templates, and other content intended for backend rendering and PDF generation.

Storage format: HTML with data-tpl-* attributes for template-specific nodes. The editor round-trips between stored HTML and Tiptap JSON automatically via custom parseHTML / renderHTML rules.

Features:

• Field placeholders — insert model fields as inline chips. HTML output: <span data-tpl-field="fieldPath" data-tpl-label="label">{{fieldPath}}</span>
• Relation field expansion — expand ManyToOne / OneToOne relations one level to insert nested paths (e.g. department.name)
• Loop tables — insert OneToMany / ManyToMany relations as loop tables with selectable columns. HTML output: <table data-tpl-loop="relationField" data-tpl-model="RelatedModel"> with <th data-tpl-field="col"> headers
• Field picker — toolbar “Insert Field” button opens a popover listing fields grouped by direct / relation / collection
• Two-level lazy loading — same as RichText: read-only renders HTML without Tiptap; edit mode lazy-loads the full editor

<Field
  fieldName="offerLetterTemplate"
  widgetType="TemplateEditor"
  widgetProps={{ modelName: "Employee" }}
/>

<Field
  fieldName="htmlTemplate"
  widgetType="TemplateEditor"
  widgetProps={{ modelName: "{{ modelName }}" }}
/>

TemplateEditor widget props:

If modelName is omitted, falls back to the field’s own metaField.modelName.

Markdown

<Field
  fieldName="notes"
  widgetType="Markdown"
  widgetProps={{ mode: "split", minHeight: 360 }}
/>

Markdown widget props:

Preview is rendered by react-markdown with remark-gfm enabled by default.

Code

<Field
  fieldName="script"
  widgetType="Code"
  widgetProps={{ language: "python", minHeight: 320, lineNumbers: true }}
/>

Code widget props:

MultiString

<Field fieldName="tags" />

Numeric Widgets

Monetary

<Field fieldName="amount" widgetType="Monetary" />

Percentage

<Field fieldName="ratio" widgetType="Percentage" />

Slider

<Field
  fieldName="score"
  widgetType="Slider"
  widgetProps={{ minValue: 0, maxValue: 100, step: 5 }}
/>

Slider widget props:

Boolean And Option Widgets

CheckBox

<Field fieldName="active" widgetType="CheckBox" />

Radio

<Field fieldName="status" widgetType="Radio" />

Radio widget props:

StatusBar

<Field fieldName="status" widgetType="StatusBar" />

StatusBar widget props:

Date And Time Widgets

<Field fieldName="period" widgetType="yyyy-MM" />
<Field fieldName="anniversary" widgetType="MM-dd" />
<Field fieldName="startTime" widgetType="HH:mm" />
<Field fieldName="startTime" widgetType="HH:mm:ss" />

Relation Widgets

SelectTree

<Field fieldName="departmentId" widgetType="SelectTree" />

TagList

<Field fieldName="userIds" widgetType="TagList" tableView={userTableView} />

See Relation Fields for relation-specific behavior, query rules, and RelationTable.

File And Image Widgets

Image

<Field fieldName="avatar" widgetType="Image" />
 
<Field
  fieldName="photo"
  widgetType="Image"
  widgetProps={{
    display: "avatar",
    avatarSize: "xl",
    previewUrl: userInfo.photoUrl,
    crop: { enabled: true, aspect: 1, shape: "round" },
  }}
/>

Image widget props:

MultiImage

<Field fieldName="photos" widgetType="MultiImage" />

MultiImage adds:

Structured Value Widgets

JsonTree

<Field fieldName="config" widgetType="JsonTree" />

JSON editor widget props:

Filters

<Field fieldName="filters" />

Filters widget props:

Orders

<Field fieldName="orders" />

Orders widget props: