Who this is for. Content modellers creating input types and theme developers reading areas built on them. After this page you can look at any input type and say what the author is offered, what is stored, and how a template reads it.
The name is a label
An input type has three settings that matter: a name, a category and, when the category is text, an editor. The name is free text chosen by whoever created it, and it decides nothing: a type called "Icon" can be plain text, and a type called "Text" can be a select. Before you write a template for a layout area, open its input type under Customization › Input Types and read the category and editor.
Input types belong to the client, so every site of the client sees the same list. The name, category and editor together must be unique. A text type must have an editor ("The editor has to be set"); the other categories have none.
The seven categories
| Category (admin label) | What is stored | What the author sees | Explicit getter |
|---|---|---|---|
text (Text) | Text; the editor decides its form | The editor's input | getAreaText(), getAreaHtml() |
image (Image) | One image from the file manager | An image picker with upload | getAreaImage() |
file (File) | One file from the file manager | A file picker with upload | getAreaFile() |
component (Component) | One component, or a global component | A component block with an Add component button | getAreaComponent(), getAreaHtml() |
collection (Collection) | An ordered list of components | A list of blocks to add, reorder, hide and remove | getAreaCollectionElements(), getAreaHtml() |
record (Record) | The id of one record of one content type | A record picker | getAreaRecord() |
records (Records (Multiple)) | The ids of several records, in the author's order | A multiple record picker | getAreaRecords() |
In every row the shorthand, {$component->heading} in Smarty or {{ component.heading }} in Twig with the area's name in place of heading, is the normal way to read the value; the last column names the explicit getter, for when you need an argument, a method on the result or plain text inside an HTML attribute. The category list also offers Widget: widgets are deprecated, so create no new types on it. A component's template reads records itself with the query helper $_query, for example $_query->findCustomEntityRecordsBy('review').
Record pickers need a content type and can be narrowed to one parent: see Record and records pickers. Components and collections are the subject of the components unit.
The thirteen text editors
| Editor (admin label) | The author gets | Stored as |
|---|---|---|
text (Text) | A single-line input | The text |
textarea (Textarea) | A multi-line input | The text, line breaks as typed |
richtext (Richtext) | The rich text editor | HTML |
number (Number) | A number input | Text. Without a regular expression of your own, only whole numbers of zero or more are accepted on save |
email (Email) | An email input, checked by the browser | The text; add a regex on the area to check the format on the server too |
select (Select) | A dropdown of fixed options | The chosen option's key |
multiselect (Multiselect) | A multiple choice of fixed options | A JSON list of keys |
switch (Switch) | An on/off switch | 1 or 0; nothing if never saved |
date (Date) | A date picker | 2026-10-19 |
datetime (Date & time) | A date and time picker | 2026-10-19 14:30:00 |
math (Math) | A formula editor | The formula as LaTeX |
code (Code) | A code editor with highlighting | The text, exactly as typed |
color (Color) | A colour picker | #rrggbb, #rrggbbaa, rgb() or rgba(); anything else is refused on save |
Options for a select or multiselect are written as possible values: see Select options, keys and design tokens. A regular expression, a maximum length and a default can be set on any text type: see Validation and default content.
Three editors change what the shorthand returns
Reading an area as a property ($component->heading, component.heading) returns rendered text for most editors. Three are different: a switch returns a real true or false, and date and datetime return a date object that prints in the site's date format, or nothing when empty. The explicit getter getAreaText() returns the stored string for all of them. How the area shorthand resolves has the full table.
Colour: swatches
A colour type can offer Swatches, a list of colours in hex or RGB(A) shown as buttons, and Restrict to swatches, which removes the free picker so the author can choose only those colours. Restricting is the way to keep authors inside a brand palette; the stored value is still the colour itself, not a name.
The code editor
A code type has an Editor mode, the language used for syntax highlighting in the admin: csp, css, html, javascript, json, json5, markdown, plain_text, smarty, text, twig or xml. The mode changes only the highlighting: it is not validated, and it does not change what is stored or how it is output.
Code area content is never evaluated as a template, in either engine: it is stored as typed and returned as text, and a template that prints it unescaped puts whatever the author typed, script tags included, on the page. Two consequences for review:
- Give code areas only to people you would trust with the theme. If the area exists to inject markup, such as a third-party embed, print it unescaped and limit who can edit it. If it exists to show code, escape it.
- Never evaluate author content as a template. A Smarty template could pass a variable to a construct such as
{eval}; do not do that with area content. The engines' own rules are in The template security policy and Twig in Core dna.
On a site that sends a Content Security Policy, an inline <script> printed from a code area is refused unless it carries the page's nonce. Printing and escaping code areas in both engines is on Dates, numbers, colours and code in templates.