Field Renderers

Overview

Field renderers determine how content fields are displayed and edited in the Headless CMS UI. Built-in renderers are available for all field types, and the available renderers depend on the field’s configuration, including whether it supports multiple values and predefined values.

Each renderer is identified by a unique rendererName and can be selected when configuring a field. The canUse method of each renderer determines whether it’s available for a specific field configuration.

Boolean Field

Boolean fields represent true/false values.

boolean-input - Renders a simple switch button.

Text Field

Text fields store short text values.

text-input - Renders a simple input with its type set to “text”.

text-inputs - Renders a simple list of text inputs. Supports multiple values.

tags - Renders a tags component for entering multiple text values. Supports multiple values.

radio-buttons - Renders radio buttons, allowing selection of a single value. Requires predefined values.

select-box - Renders a select box, allowing selection of a single value. Requires predefined values.

checkboxes - Renders checkboxes, allowing selection of multiple values. Supports multiple values. Requires predefined values.

Number Field

Number fields store numeric values.

number-input - Renders a simple input with its type set to “number”.

number-inputs - Renders a simple list of number inputs. Supports multiple values.

radio-buttons - Renders radio buttons, allowing selection of a single numeric value. Requires predefined values.

select-box - Renders a select box, allowing selection of a single numeric value. Requires predefined values.

checkboxes - Renders checkboxes, allowing selection of multiple numeric values. Supports multiple values. Requires predefined values.

Long Text Field

Long text fields store larger amounts of text.

long-text-text-area - Renders a simple text area, suitable for larger amounts of text.

long-text-inputs - Renders a simple list of text areas. Supports multiple values.

Rich Text Field

Rich text fields store formatted text content using Lexical editor.

lexical-text-input - Renders a lexical text editor.

lexical-text-inputs - Renders a list of lexical editors. Supports multiple values.

DateTime Field

DateTime fields store date and time values in various formats. The format is defined using the settings.type property.

date-time-input - Renders input for various formats of date and time. Supports: dateOnly, dateTimeWithoutTimezone, dateTimeWithTimezone, time.

date-time-inputs - Renders inputs for various formats of dates and times. Supports multiple values. Supports: dateOnly, dateTimeWithoutTimezone, dateTimeWithTimezone, time.

Reference Field

Reference fields create relationships between content entries.

ref-input - Renders an auto-complete input, allowing selection of a single referenced entry.

ref-inputs - Renders an auto-complete input, allowing selection of multiple referenced entries. Supports multiple values.

ref-simple-single - Renders a list of radio buttons, allowing selection of one related record.

ref-simple-multiple - Renders a list of checkboxes, allowing selection of one or more records. Supports multiple values.

ref-advanced-single - Renders a preview card of the selected record. The user searches through records using a modal window.

ref-advanced-multiple - Renders preview cards of the selected records. User can browse through records using a modal dialog. Supports multiple values.

Object Field

Object fields contain nested field structures.

object-accordion - Renders fields within an accordion.

objects-accordion - Renders multiple objects within an accordion with add/remove functionality. Supports multiple values.

Dynamic Zone Field

Dynamic zone fields allow selecting from predefined templates.

dynamicZone - Renders a dynamic zone with template selection. Templates must be defined in field settings. Supports both single and multiple values.

Special Field Types

text-separator - Renders a visual separator to organize form fields. Field type: text:separator.

Utility Renderers

hidden - Hides the field from the UI completely. Can be used with all fields.

passthrough - Renders child fields without any extra wrappers. Special cases only (not selectable by default).