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.

switch - Renders a simple switch button.

Text Field

Text fields store short text values.

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

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

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

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

dropdown - 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.

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

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

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

dropdown - 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.

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

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

Rich Text Field

Rich text fields store formatted text content using Lexical editor.

lexicalEditor - Renders a lexical text editor.

lexicalEditors - 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.

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

dateTimeInputs - 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.

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

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

refRadioButtons - Renders a list of radio buttons, allowing selection of one related record.

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

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

refDialogMultiple - 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.

objectAccordionSingle - Renders fields within an accordion.

objectAccordionMultiple - 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

uiSeparator - Renders a visual separator to organize form fields. Field type: ui. Note that the ui field is a base field, which other UI fields can be built on top of.

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).