Field Types

FieldRenderer.vue renders PHP field descriptors into Ant Design Vue form controls. Every field type works in both the Settings form and the generic GenericTool renderer, so Pro add-on authors write field descriptors once and see consistent output in both contexts.

All Supported Types

Type	Renders	Schema keys	Modeled value
text	a-input	id, group, label, placeholder, help, required	string
email	a-input (type=email)	id, group, label, placeholder, help, required	string
password	a-input-password	id, group, label, placeholder, help, required	string (masked in REST)
number	a-input-number	id, group, label, min, max, step, help	number
checkbox	a-switch	id, group, label, help	boolean
select	a-select	id, group, label, options[], help	string
radio	a-radio-group	id, group, label, options[], help	string
segmented	a-segmented	id, group, label, options[], help	string
mailer-cards	Card grid	id, group, options[]	string (selected slug)
button	a-button	id, label, action, href	— (no model)
link	<a> tag	id, label, href, target	— (no model)
textarea	a-textarea	id, group, label, placeholder, rows, help	string
table	a-table (read-only)	id, group, label, columns[], help	array
code-block	<pre> + copy button	id, group, label, language, help	string
date-range	a-range-picker	id, group, label, format, help	[string, string] (ISO dates)
action-button	a-button → REST call	id, label, endpoint, method, response_format, help	— (no model)

The five types in the bottom block (textarea, table, code-block, date-range, action-button) were added in 1.0.0.

textarea

Multi-line text input. Uses Ant Design a-textarea.

@since 1.0.0

{
    "id": "webhook_template",
    "group": "postmark",
    "type": "textarea",
    "label": "Webhook Payload Template",
    "placeholder": "{ "event": "{{event}}" }",
    "rows": 6,
    "help": "JSON template sent to your webhook endpoint on each event."
}

rows defaults to 4 when omitted. The value is modeled as a plain string.

table

Read-only tabular display. Uses Ant Design a-table with pagination disabled. Intended for displaying data returned from the server — bounce lists, queue contents, report rows. The value is the rows array.

@since 1.0.0

{
    "id": "suppression_list",
    "group": "postmark",
    "type": "table",
    "label": "Suppression List",
    "columns": [
        { "key": "email",  "title": "Email Address" },
        { "key": "reason", "title": "Reason" },
        { "key": "date",   "title": "Suppressed At" }
    ],
    "help": "Addresses currently suppressed by Postmark."
}

The columns array is required. Each column needs at minimum key (matches the row object property) and title (header label).

code-block

Monospace <pre> block with a copy-to-clipboard button. Uses a plain <pre> with Ant Design styling. Useful for displaying API responses, debug output, or generated configuration snippets.

@since 1.0.0

{
    "id": "dkim_record",
    "group": "postmark",
    "type": "code-block",
    "label": "DKIM DNS Record",
    "language": "dns",
    "help": "Add this TXT record to your domain's DNS settings."
}

language is an optional hint used for display purposes only — no syntax highlighting library is bundled. The value is a string.

date-range

A dual date-picker rendered by Ant Design a-range-picker. Used for report filters, log date filters, and any input that needs a start/end date pair.

@since 1.0.0

{
    "id": "report_period",
    "group": "reports",
    "type": "date-range",
    "label": "Report Period",
    "format": "YYYY-MM-DD",
    "help": "Select the start and end date for the report."
}

format defaults to YYYY-MM-DD when omitted. The modeled value is a two-element array of ISO date strings: ["2025-04-01", "2025-04-30"].

action-button

A button that fires a REST request when clicked and renders the response inline. The endpoint and method come from the server-side schema — not from user input — so there is no open-redirect risk. The response is rendered in the format specified by response_format (see Tools — Available action response formats).

@since 1.0.0

{
    "id": "flush_suppression_list",
    "type": "action-button",
    "label": "Flush Suppression List",
    "endpoint": "nimbly-mail-pro/v1/postmark/suppression/flush",
    "method": "DELETE",
    "response_format": "none",
    "help": "Permanently removes all suppressed addresses. This cannot be undone."
}

action-button carries no form model value. It is purely imperative. Do not place it inside a section that expects a saved value — use it alongside informational fields or as a standalone control in a tool actions array.