Stage templates

The Stage component renders each form element as an HTML item in the abstract view. This section explains the two rendering strategies: the modern web-component approach (recommended) and the legacy Fluid-partial approach (deprecated).

Built-in web component (recommended)

When no formEditorPartials entry exists for a form element type, the Stage component automatically renders it using the built-in <typo3-form-form-element-stage-item> web component. The component displays the element's label, type icon, validators, select options and allowed MIME types without requiring any custom JavaScript.

Tip

For most custom form elements this is the recommended approach. Simply omit formEditorPartials from the prototype configuration and the editor handles the rest.

Properties set on the web component from the FormElement model:

Property	Source in FormElement model
`elementType`	Form element definition `label`
`elementLabel`	`label` (falls back to `identifier`)
`elementIconIdentifier`	Form element definition `iconIdentifier`
`validators`	`validators` array (excludes `NotEmpty`, shown via `isRequired`)
`isRequired`	`true` when a `NotEmpty` validator is present
`options`	`properties.options` (for select-like elements)
`allowedMimeTypes`	`properties.allowedMimeTypes`
`content`	`properties.text` or `properties.contentElementUid`
`isHidden`	`true` when `renderingOptions.enabled` is `false`

Custom Fluid partial (advanced)

If you need fully custom stage rendering – for example to display a proprietary summary of complex properties – you can still provide a Fluid partial and subscribe to the view/stage/abstract/render/template/perform event to populate it with DOM manipulation.

The core Fluid partials are located in EXT:form/Resources/Private/Backend/Partials/FormEditor/Stage/.

Warning

The legacy stage rendering helpers renderSimpleTemplateWithValidators() and renderSelectTemplates() from @typo3/form/backend/form-editor/stage-component are deprecated since TYPO3 v14.2 and will be removed in TYPO3 v15. Migrate to the web component approach (omit formEditorPartials) or implement custom DOM manipulation in the event subscriber.

Stage/SimpleTemplate (deprecated)

Displays the element label. When the element has validators, a validator icon and their labels appear on hover/selection. Rendered via the deprecated renderSimpleTemplateWithValidators().

Deprecated since version 14.2

Use the <typo3-form-form-element-stage-item> web component by omitting formEditorPartials, or implement custom DOM manipulation in the view/stage/abstract/render/template/perform subscriber. See Deprecation forge#109306.

Stage/SelectTemplate (deprecated)

Extends Stage/SimpleTemplate by additionally listing the chosen option labels from properties.options.*. Rendered via the deprecated renderSelectTemplates().

Example form element using select options:

type: MultiCheckbox
identifier: multicheckbox-1
label: 'Multi checkbox'
properties:
  options:
    value1: label1
    value2: label2

The template partial contains a container with the path to read:

<div data-identifier="multiValueContainer"
     data-template-property="properties.options"></div>

For elements using a different array property (e.g. FileUpload with properties.allowedMimeTypes), adjust the data-template-property attribute accordingly:

<div data-identifier="multiValueContainer"
     data-template-property="properties.allowedMimeTypes"></div>

The web component handles both cases automatically.

Deprecated since version 14.2

Use the <typo3-form-form-element-stage-item> web component by omitting formEditorPartials. See Deprecation: #109306 - Deprecate form editor stage template rendering functions.