Compare text

Find the difference between two text files

Real-time editor

Hide unchanged lines

Disable line wrap

Layout

Diff precision

Syntax highlighting

Diffchecker Desktop The most secure way to run Diffchecker. Get the Diffchecker Desktop app: your diffs never leave your computer!Get Desktop

Large file not firing all shortcodes with Regular Parser

Created 7 years agoDiff never expires

135 removals

Lines
Total
Removed

Characters
Total
Removed

To continue using this feature, upgrade to Diffchecker Pro View Pricing

438 lines

104 additions

Lines
Total
Added

Characters
Total
Added

To continue using this feature, upgrade to Diffchecker Pro View Pricing

407 lines

## Regular Parser

## Regex Parser

Admin-side forms can be created with a variety of fields. This document provides a complete reference of the properties of each field, and provides usage examples.

In addition to the fields listed below, reserved for usage in the Admin, you can also use all the fields available in the frontend forms described in [the Frontend Forms Fields Reference](/forms/forms/fields-available).

### Special Form Fields Available Exclusively in the Admin

[div class="table table-keycol"]

| Field | Description |

| :----- | :----- |

| **[Array](#the-array-field)** | used to create key-value arrays |

| **BackupHistory** | |

| **Blueprint** | |

| **[Colorpicker](#the-colorpicker-field)** | show a color picker |

| **[Columns](#the-columns-column-fields)** | used to break the form into multiple columns |

| **[Column](#the-columns-column-fields)** | used to show a single column (used with the `Columns` field) |

| **Cron** | |

| **CronStatus** | |

| **[Dateformat](#the-dateformat-field)** | a special select that renders the current date/time in the passed formats |

| **[Datetime](#the-datetime-field)** | a date and time selection field |

| **[Editor](#the-editor-field)** | show a markdown editor |

| **[Fieldset](#the-fieldset-field)** | group a set of fields inside a collapsible accordion |

| **[File](#the-file-field)** | in Admin, **File** is specialized to be used in plugin and theme configurations (blueprints). Handles uploading a file to a location and deleting it, and removing it from the theme / plugin configuration |

| **[Filepicker](#the-filepicker-field)** | **Filepicker** allows to choose files from a location in the web server filesystem. |

| **Frontmatter** | |

| **IconPicker** | |

| **[List](#the-list-field)** | used to create collections of fields |

| **Markdown** | |

| **MediaPicker** | |

| **Multilevel** | |

| **Order** | |

| **PageMedia** | |

| **[PageMediaSelect](#the-pagemediaselect-field)** | shows a select with all the page media. Used in Pages blueprints to let the user choose a media file to be assigned to a field. |

| **[Pages](#the-pages-field)** | shows a list of the site pages |

| **Parents** | |

| **Permissions** | |

| **Range** | |

| **[Section](#the-section-field)** | used to divide a setting page into sections; each section comes with a title |

| **[Selectize](#the-selectize-field)** | a hybrid of a text box and a select box. Mostly useful for tagging and other element picking fields. |

| **SelectUnique** | |

| **[Taxonomy](#the-taxonomy-field)** | a special select preconfigured to select one or more taxonomies |

| **ThemeSelect** | |

| **UserInfo** | |

| **Xss** | |

[/div]

</div>

### Common Fields Attributes

Every field accepts a list of attributes you can use. Each field could share these common attributes, but particular fields might ignore them. The best way to check which attributes are allowed on a field is to check the field description in this page, and see which attributes are mentioned.

This list provides a common ground so there's no need to repeat the description of a common field.

[div class="table table-keycol"]

| Attribute | Description |

| :----- | :----- |

| `autocomplete` | accepts `on` or `off` |

| `autofocus` | if enabled, autofocus on that field |

| `classes` | accepts a string with one or more CSS classes to add |

| `default` | sets the field default value. This ensures you will always get back either a user-specified value _or_ this default value. See also `placeholder`. |

| `disabled` | sets the field disabled state |

| `help` | Adds a tooltip to the field |

| `id` | sets the field id as well as the `for` attribute on the label |

| `label` | sets the field label |

| `name` | sets the field name |

| `novalidate` | sets the field novalidate state |

| `placeholder` | sets the field placeholder value. This is to set a value the user can see as a prompt for their own value, but it does not influence what value ultimately gets written. See also `default`. |

| `readonly` | sets the field read-only state |

| `size` | sets the field size, which in turn adds a class to its container. Valid values are `large`, `x-small`, `medium`, `long`, `small`. You can of course add more in the template you see, when used in the frontend |

| `style` | sets the field style. If set to `vertical`, the field is able to appear full width. This is an easy way to clean up the form. |

| `title` | sets the field title value |

| `toggleable` | add a checkbox that will toggle the enabled/disabled attribute of the field |

| `validate.required` | if set to a positive value, sets the field as required |

| `validate.pattern` | sets a validation pattern |

| `validate.message` | sets the message shown if the validation fails |

| `validate.type` | sets the field type used during validation |

[/div]

</div>

### Know more about fields

You can read how the fields are built from the source: [Fields added by the Form Plugin](https://github.com/getgrav/grav-plugin-form/tree/master/templates/forms) and [Fields only available in Admin](https://github.com/getgrav/grav-plugin-admin/tree/master/themes/grav/templates/forms).

### Validation

Most of the fields allow validation.

[prism classes="language-yaml line-numbers"]

validate:

required: true

[/prism]

</code></pre></div>

will cause the field to be marked as required.

[prism classes="language-yaml line-numbers"]

validate:

message: 'Some message'

[/prism]

</code></pre></div>

will show the defined message when the field is not correctly filled.

[prism classes="language-yaml line-numbers"]

validate:

pattern: 'Some pattern'

[/prism]

</code></pre></div>

will validate the field value against the passed regex pattern. Examples: `pattern: "[1-9][0-9]*"`, `pattern: '[A-Za-z0-9-]+'`, `pattern: '[a-z0-9-]+'`, ` pattern: '^[a-z0-9_-]{3,16}$'`, `pattern: '(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}'`

#### validate.type

`validate.type` indicates which type should it validate against.

Some examples:

An editor will result in a `textarea`:

[prism classes="language-yaml line-numbers"]

content:

type: editor

validate:

type: textarea

[/prism]

</code></pre></div>

A selectize will be a `commalist`:

[prism classes="language-yaml line-numbers"]

taxonomies:

type: selectize

size: large

label: PLUGIN_ADMIN.TAXONOMY_TYPES

classes: fancy

help: PLUGIN_ADMIN.TAXONOMY_TYPES_HELP

validate:

type: commalist

filters.category:

type: selectize

label: Category filter

help: Comma separated list of category names

validate:

type: commalist

[/prism]

</code></pre></div>

Validate an email address:

[prism classes="language-yaml line-numbers"]

author.email:

type: text

size: large

label: PLUGIN_ADMIN.DEFAULT_EMAIL

help: PLUGIN_ADMIN.DEFAULT_EMAIL_HELP

validate:

type: email

[/prism]

</code></pre></div>

Make sure a value is a bool:

[prism classes="language-yaml line-numbers"]

summary.enabled:

type: toggle

label: PLUGIN_ADMIN.ENABLED

highlight: 1

help: PLUGIN_ADMIN.ENABLED_HELP

options:

1: PLUGIN_ADMIN.YES

0: PLUGIN_ADMIN.NO

validate:

type: bool

[/prism]

</code></pre></div>

Make sure a value is an integer between 0 and 65536:

[prism classes="language-yaml line-numbers"]

summary.size:

type: text

size: x-small

label: PLUGIN_ADMIN.SUMMARY_SIZE

help: PLUGIN_ADMIN.SUMMARY_SIZE_HELP

validate:

type: int

min: 0

max: 65536

[/prism]

</code></pre></div>

Make sure a value is a number > 1:

[prism classes="language-yaml line-numbers"]

pages.list.count:

type: text

size: x-small

label: PLUGIN_ADMIN.DEFAULT_PAGE_COUNT

help: PLUGIN_ADMIN.DEFAULT_PAGE_COUNT_HELP

validate:

type: number

min: 1

[/prism]

</code></pre></div>

Validate a taxonomy type as an array:

[prism classes="language-yaml line-numbers"]

header.taxonomy:

type: taxonomy

label: PLUGIN_ADMIN.TAXONOMY

multiple: true

validate:

type: array

[/prism]

</code></pre></div>

Validate a text field as a slug:

[prism classes="language-yaml line-numbers"]

folder:

type: text

label: PLUGIN_ADMIN.FOLDER_NAME

validate:

type: slug

[/prism]

</code></pre></div>

### Array Field

![Array](array_field_bp.gif)

The `array` field type is used to create a simple list of key - values objects.

Example:

[prism classes="language-yaml line-numbers"]

metadata:

type: array

label: PLUGIN_ADMIN.METADATA

help: PLUGIN_ADMIN.METADATA_HELP

placeholder_key: PLUGIN_ADMIN.METADATA_KEY

placeholder_value: PLUGIN_ADMIN.METADATA_VALUE

required: true

[/prism]

</code></pre></div>

[div class="table table-keycol"]

| Attribute | Description |

| :----- | :----- |

| `placeholder_key` | |

| `placeholder_value` | |

| `value_only` | |

[/div]

</div>

[div class="table table-keycol"]

| Common Attributes Allowed |

| :----- |

| [default](#common-fields-attributes) |

| [help](#common-fields-attributes) |

| [label](#common-fields-attributes) |

| [name](#common-fields-attributes) |

| [style](#common-fields-attributes) |

| [toggleable](#common-fields-attributes) |

| [validate.required](#common-fields-attributes) |

| [validate.type](#common-fields-attributes) |

[/div]

</div>

### Colorpicker Field

![Colorpicker](colorpicker_field.png)

The `colorpicker` field type is used to display a color picker field

Example:

[prism classes="language-yaml line-numbers"]

color:

type: colorpicker

label: Choose a color

[/prism]

</code></pre></div>

[div class="table table-keycol"]

| Common Attributes Allowed |

| :----- |

| [autocomplete](#common-fields-attributes) |

| [autofocus](#common-fields-attributes) |

| [classes](#common-fields-attributes) |

| [default](#common-fields-attributes) |

| [disabled](#common-fields-attributes) |

| [help](#common-fields-attributes) |

| [id](#common-fields-attributes) |

| [label](#common-fields-attributes) |

| [name](#common-fields-attributes) |

| [placeholder](#common-fields-attributes) |

| [style](#common-fields-attributes) |

| [title](#common-fields-attributes) |

| [toggleable](#common-fields-attributes) |

| [validate.message](#common-fields-attributes) |

| [validate.required](#common-fields-attributes) |

| [validate.type](#common-fields-attributes) |

[/div]

</div>

### Columns / column Fields

![Columns](columns_field_bp.gif)

The `columns` and `column` field types are used to divide the contained form fields in columns

Example:

[prism classes="language-yaml line-numbers"]

columns:

type: columns

fields:

column1:

type: column

fields:

# .... subfields

column2:

type: column

fields:

# .... other subfields

[/prism]

</code></pre></div>

[div class="table table-keycol"]

| Attribute | Description |

| :----- | :----- |

| `fields` | The columns / column subfields |

[/div]

</div>

### Dateformat Field

![DateFormat](dateformat_field_bp.gif)

The `dateformat` field type is used to

Example:

[prism classes="language-yaml line-numbers"]

pages.dateformat.short:

type: dateformat

size: medium

classes: fancy

label: PLUGIN_ADMIN.SHORT_DATE_FORMAT

help: PLUGIN_ADMIN.SHORT_DATE_FORMAT_HELP

default: "jS M Y"

options:

"F jS \\a\\t g:ia": Date1

"l jS \\of F g:i A": Date2

"D, d M Y G:i:s": Date3

"d-m-y G:i": Date4

"jS M Y": Date5

[/prism]

</code></pre></div>

[div class="table table-keycol"]

| Attribute | Description |

| :----- | :----- |

| `options` | The field available key-value options |

| `multiple` | boolean. If positive, the field accepts multiple values |

| `selectize` | |

[/div]

</div>

[div class="table table-keycol"]

| Common Attributes Allowed |

| :----- |

| [autofocus](#common-fields-attributes) |

| [classes](#common-fields-attributes) |

| [default](#common-fields-attributes) |

| [disabled](#common-fields-attributes) |

| [help](#common-fields-attributes) |

| [label](#common-fields-attributes) |

| [name](#common-fields-attributes) |

| [novalidate](#common-fields-attributes) |

| [size](#common-fields-attributes) |

| [style](#common-fields-attributes) |

| [toggleable](#common-fields-attributes) |

| [validate.required](#common-fields-attributes) |

| [validate.type](#common-fields-attributes) |

[/div]

</div>

### Datetime Field

![DateTime](datetime_field.gif)

The `datetime` field type is used to store and present a date and time field.

Example:

[prism classes="language-yaml line-numbers"]

header.date:

type: datetime

label: PLUGIN_ADMIN.DATE

toggleable: true

help: PLUGIN_ADMIN.DATE_HELP

[/prism]

</code></pre></div>

[div class="table table-keycol"]

| Attribute | Description |

| :----- | :----- |

| `validate.min` | A minimum valid value |

| `validate.max` | A maximum valid value |

[/div]

</div>

[div class="table table-keycol"]

| Common Attributes Allowed |

| :----- |

| [default](#common-fields-attributes) |

| [help](#common-fields-attributes) |

| [label](#common-fields-attributes) |

| [name](#common-fields-attributes) |

| [size](#common-fields-attributes) |

| [style](#common-fields-attributes) |

| [toggleable](#common-fields-attributes) |

| [toggleable](#common-f

| [validate.required](#common-fields-attributes) |

| [validate.type](#common-fields-attributes) |

[/div]

### Editor Field

![Editor Field](editor_field_bp.gif)

The `editor` field type is used to present the Codemirror editor

Example:

[prism classes="language-yaml line-numbers"]

frontmatter:

classes: frontmatter

type: editor

label: PLUGIN_ADMIN.FRONTMATTER

autofocus: true

codemirror:

mode: 'yaml'

indentUnit: 4

autofocus: true

indentWithTabs: false

lineNumbers: true

styleActiveLine: true

gutters: ['CodeMirror-lint-markers']

lint: true

[/prism]

[div class=

Saved diffs

Original text

Open file

## Regular Parser

Admin-side forms can be created with a variety of fields. This document provides a complete reference of the properties of each field, and provides usage examples.

### Special Form Fields Available Exclusively in the Admin

### Common Fields Attributes

This list provides a common ground so there's no need to repeat the description of a common field.

### Know more about fields

### Validation

Most of the fields allow validation.

[prism classes="language-yaml line-numbers"]
validate:
    required: true
[/prism]

will cause the field to be marked as required.

[prism classes="language-yaml line-numbers"]
validate:
    message: 'Some message'
[/prism]

will show the defined message when the field is not correctly filled.

[prism classes="language-yaml line-numbers"]
validate:
    pattern: 'Some pattern'
[/prism]

#### validate.type

`validate.type` indicates which type should it validate against.

Some examples:

An editor will result in a `textarea`:

[prism classes="language-yaml line-numbers"]
content:
    type: editor
    validate:
      type: textarea
[/prism]

A selectize will be a `commalist`:

[prism classes="language-yaml line-numbers"]
taxonomies:
    type: selectize
    size: large
    label: PLUGIN_ADMIN.TAXONOMY_TYPES
    classes: fancy
    help: PLUGIN_ADMIN.TAXONOMY_TYPES_HELP
    validate:
        type: commalist

filters.category:
  type: selectize
  label: Category filter
  help: Comma separated list of category names
  validate:
    type: commalist
[/prism]

Validate an email address:

[prism classes="language-yaml line-numbers"]
author.email:
    type: text
    size: large
    label: PLUGIN_ADMIN.DEFAULT_EMAIL
    help: PLUGIN_ADMIN.DEFAULT_EMAIL_HELP
    validate:
        type: email
[/prism]

Make sure a value is a bool:

[prism classes="language-yaml line-numbers"]
summary.enabled:
    type: toggle
    label: PLUGIN_ADMIN.ENABLED
    highlight: 1
    help: PLUGIN_ADMIN.ENABLED_HELP
    options:
        1: PLUGIN_ADMIN.YES
        0: PLUGIN_ADMIN.NO
    validate:
        type: bool
[/prism]

Make sure a value is an integer between 0 and 65536:

[prism classes="language-yaml line-numbers"]
summary.size:
    type: text
    size: x-small
    label: PLUGIN_ADMIN.SUMMARY_SIZE
    help: PLUGIN_ADMIN.SUMMARY_SIZE_HELP
    validate:
        type: int
        min: 0
        max: 65536
[/prism]

Make sure a value is a number > 1:

[prism classes="language-yaml line-numbers"]
pages.list.count:
    type: text
    size: x-small
    label: PLUGIN_ADMIN.DEFAULT_PAGE_COUNT
    help: PLUGIN_ADMIN.DEFAULT_PAGE_COUNT_HELP
    validate:
        type: number
        min: 1
[/prism]

Validate a taxonomy type as an array:

[prism classes="language-yaml line-numbers"]
header.taxonomy:
  type: taxonomy
  label: PLUGIN_ADMIN.TAXONOMY
  multiple: true
  validate:
    type: array
[/prism]

Validate a text field as a slug:

[prism classes="language-yaml line-numbers"]
folder:
  type: text
  label: PLUGIN_ADMIN.FOLDER_NAME
  validate:
    type: slug
[/prism]

### Array Field

![Array](array_field_bp.gif)

The `array` field type is used to create a simple list of key - values objects.

Example:

[prism classes="language-yaml line-numbers"]
metadata:
   type: array
   label: PLUGIN_ADMIN.METADATA
   help: PLUGIN_ADMIN.METADATA_HELP
   placeholder_key: PLUGIN_ADMIN.METADATA_KEY
   placeholder_value: PLUGIN_ADMIN.METADATA_VALUE
   required: true
[/prism]

### Colorpicker Field

![Colorpicker](colorpicker_field.png)

The `colorpicker` field type is used to display a color picker field

Example:

[prism classes="language-yaml line-numbers"]
color:
   type: colorpicker
   label: Choose a color
[/prism]

### Columns / column Fields

![Columns](columns_field_bp.gif)

The `columns` and `column` field types are used to divide the contained form fields in columns

Example:

[prism classes="language-yaml line-numbers"]
columns:
  type: columns
  fields:
    column1:
      type: column
      fields:

# .... subfields

column2:
      type: column
      fields:

# .... other subfields
[/prism]

### Dateformat Field

![DateFormat](dateformat_field_bp.gif)

The `dateformat` field type is used to

Example:

[prism classes="language-yaml line-numbers"]
pages.dateformat.short:
    type: dateformat
    size: medium
    classes: fancy
    label: PLUGIN_ADMIN.SHORT_DATE_FORMAT
    help: PLUGIN_ADMIN.SHORT_DATE_FORMAT_HELP
    default: "jS M Y"
    options:
        "F jS \\a\\t g:ia": Date1
        "l jS \\of F g:i A": Date2
        "D, d M Y G:i:s": Date3
        "d-m-y G:i": Date4
        "jS M Y": Date5
[/prism]

### Datetime Field

![DateTime](datetime_field.gif)

The `datetime` field type is used to store and present a date and time field.

Example:

[prism classes="language-yaml line-numbers"]
header.date:
  type: datetime
  label: PLUGIN_ADMIN.DATE
  toggleable: true
  help: PLUGIN_ADMIN.DATE_HELP
[/prism]

### Editor Field

![Editor Field](editor_field_bp.gif)

The `editor` field type is used to present the Codemirror editor

Example:

[prism classes="language-yaml line-numbers"]
frontmatter:
  classes: frontmatter
  type: editor
  label: PLUGIN_ADMIN.FRONTMATTER
  autofocus: true
  codemirror:
    mode: 'yaml'
    indentUnit: 4
    autofocus: true
    indentWithTabs: false
    lineNumbers: true
    styleActiveLine: true
    gutters: ['CodeMirror-lint-markers']
    lint: true
[/prism]

### Fieldset Field

![Fieldset Field](fieldset-gif.gif)
The `fieldset` groups a set of fields inside a collapsible box.

Example:

[prism classes="language-yaml line-numbers"]
header.fieldset:
  type: fieldset
  title: Your title
  help: Help text
  info: Info text
  text: Text inside fieldset and before other fields
  icon: comments
  collapsed: true     # Initial state of fieldset (see collapsible option)
  collapsible: true    # Whether one can expand the fieldset or not 
  fields:
    header.fieldset.an_example_text:
      type: text
      label: text
    header.fieldset.an_example_textarea:
      type: textarea
      label: textarea
[/prism]

### File Field

![File Field](file_field_bp.gif)

The `file` field type can be used in pages, plugin and theme configurations (blueprints). Handles uploading a file to a location as well as removing it from the page headers or theme / plugin configuration.

! More details can be found in the dedicated [How To: Add a File Upload](../how-to-add-file-upload) section. Also note that displaying an image uploaded in a file field is not done the same way than with a filepicker field. More details about how to access images uploaded in a file field can be found on this [cookbook entry](https://learn.getgrav.org/cookbook/twig-recipes#displaying-an-image-uploaded-in-a-file-field).

Example:

[prism classes="language-yaml line-numbers"]
custom_logo_login_screen:
  type: file
  label: Custom Logo Login Screen
  destination: 'user/plugins/admin-pro/assets'
  accept:
    - image/*
[/prism]

[prism classes="language-yaml line-numbers"]
custom_file:
  type: file
  label: A Label
  destination: 'user/themes/my-theme/assets'
  multiple: true
  limit: 5
  filesize: 1
  accept:
    - image/*
[/prism]

[div class="table table-keycol"]
| Attribute           | Description                                                                                                |
| :-----              | :-----                                                                                                     |
| `destination`       | The folder where the files will be stored, relative to the Grav root. E.g. `user/plugins/my-plugin/assets` |
| `multiple`          | Whether or not to allow more than one file per field                                                       |
| `limit`             | When `multiple` is enabled, allows to constrain the amount of files permitted to be uploaded               |
| `filesize`          | The size in MB each file is allowed                                                                        |
| `accept`            | Add a list of accepted page mime types and extensions. E.g. `["image/*", '.mp3']`                          |
| `random_name`       | Uses a random filename for each file                                                                       |
| `avoid_overwriting` | Will append a timestamp before each filename if a conflict would occur                                     |
[/div]

### Filepicker Field

![Filepicker Field](filepicker_field.png)

The `filepicker` field type can be used in pages, plugin and theme configurations (blueprints). Handles selecting a file from a location and saving it to the page headers or theme / plugin configuration.

Example:

[prism classes="language-yaml line-numbers"]
picked_image:
  type: filepicker
  folder: 'theme@:/images/pages'
  label: Select a file
  preview_images: true
  accept:
    - .png
    - .jpg
[/prism]

[prism classes="language-yaml line-numbers"]
header.a_file:
  type: filepicker
  folder: '@self'
  preview_images: true
  label: Select a file
[/prism]

### Honeypot Field

The `honeypot` field type creates a hidden field that, when filled out, will return with an error. This is a useful way to prevent bots from filling out and submitting a form.

Example:

[prism classes="language-yaml line-numbers"]
fields:
    - name: honeypot
      type: honeypot
[/prism]

This is a simple text field which does not appear on the front end. Bots, which detect fields in the code and fill them out automatically, will likely fill the field out. The error prevents that form from being properly submitted. The error comes back next to the form element, rather than on the top in a message block.

A honeypot field is a popular alternative to captcha fields.

### List Field

![List Field](list_field_bp.gif)

The `list` field type is used to create collections of fields. The field accepts a `fields` attribute that will host subfields, and there will be an "Add item" button to allow the user to add more items to the collection.

Example:

[prism classes="language-yaml line-numbers"]
header.buttons:
  name: buttons
  type: list
  style: vertical
  label: Buttons
  fields:
    .text:
      type: text
      label: Text
    .url:
      type: text
      label: URL
    .primary:
      type: toggle
      label: Primary
      highlight: 1
      default: 1
      options:
          1: 'Yes'
          0: 'No'
      validate:
          type: bool
[/prism]

This example will generate this Admin interface:

![](field_list_1.png)

When saving the page, we'll see the following YAML added to the page frontmatter:

[prism classes="language-yaml line-numbers"]
buttons:
    -
        text: 'Some text'
        url: 'https://getgrav.org'
        primary: false
    -
        text: 'Another text'
        url: 'https://another-url.com'
        primary: true
[/prism]

This will be used in the Theme Twig to output the list in some nice way.

Another example of this field definition is this list of Features, used by Antimatter's Features Modular child page. Every feature has an icon, a header and some text:

[prism classes="language-yaml line-numbers"]
header.features:
  name: features
  type: list
  label: Features

fields:
    .icon:
      type: text
      label: Icon
    .header:
      type: text
      label: Header
    .text:
      type: text
      label: Text
[/prism]

Accessing and displaying the data of a `list` field is done with a simple twig for loop, like in the example below:

[prism classes="language-twig line-numbers"]
{% for feature in page.header.features %}
    {{ feature.icon }}
    {{ feature.header }}
    {{ feature.text }}
{% endfor %}
[/prism]

### PageMediaSelect Field

The `pagemediaselect` field type is used to allow the users to choose a media from one of the page media already uploaded through FTP or using the page media manager.

Example

[prism classes="language-yaml line-numbers"]
header.img_link:
  label: Choose media
  type: pagemediaselect
[/prism]

### Pages Field

![Pages Field](pages_field_bp.gif)

The `pages` field type shows a list of the site pages.

Example

[prism classes="language-yaml line-numbers"]
home.alias:
    type: pages
    size: medium
    classes: fancy
    label: PLUGIN_ADMIN.HOME_PAGE
    show_all: false
    show_modular: false
    show_root: false
    help: PLUGIN_ADMIN.HOME_PAGE_HELP
[/prism]

If you set `multiple` to true, you need to add `validate.type: array`. Otherwise the array of selected pages will not be saved correctly.

### Section Field

The `Section` field type is used to divide a setting page into sections.

Example:

<div class="prism-wrapper"><pre class="language-yaml line-numbers"><code>
content:
    type: section
    title: PLUGIN_ADMIN.DEFAULTS
    underline: true

fields:

#..... subfields
</code></pre></div>

### Selectize Field

![Selectize](selectize_field_bp.gif)

The `selectize` field type is used to show a hybrid of a text box and a select box. Mostly useful for tagging and other element picking fields.

Example:

<div class="prism-wrapper"><pre class="language-yaml line-numbers"><code>
taxonomies:
    type: selectize
    size: large
    label: PLUGIN_ADMIN.TAXONOMY_TYPES
    classes: fancy
    help: PLUGIN_ADMIN.TAXONOMY_TYPES_HELP
    validate:
        type: commalist
</code></pre></div>

### Taxonomy Field

![Taxonomy](taxonomy_field_bp.gif)

The `taxonomy` field type is a special select preconfigured to select one or more taxonomy values.

Example:

<div class="prism-wrapper"><pre class="language-yaml line-numbers"><code>
header.taxonomy:
  type: taxonomy
  label: PLUGIN_ADMIN.TAXONOMY
  multiple: true
  validate:
    type: array
</code></pre></div>

Changed text

Open file

## Regex Parser

Admin-side forms can be created with a variety of fields. This document provides a complete reference of the properties of each field, and provides usage examples.

### Special Form Fields Available Exclusively in the Admin

### Common Fields Attributes

This list provides a common ground so there's no need to repeat the description of a common field.

### Know more about fields

### Validation

Most of the fields allow validation.

<div class="prism-wrapper"><pre class="language-yaml line-numbers"><code>
validate:
    required: true
</code></pre></div>

will cause the field to be marked as required.

<div class="prism-wrapper"><pre class="language-yaml line-numbers"><code>
validate:
    message: 'Some message'
</code></pre></div>

will show the defined message when the field is not correctly filled.

<div class="prism-wrapper"><pre class="language-yaml line-numbers"><code>
validate:
    pattern: 'Some pattern'
</code></pre></div>

#### validate.type

`validate.type` indicates which type should it validate against.

Some examples:

An editor will result in a `textarea`:

<div class="prism-wrapper"><pre class="language-yaml line-numbers"><code>
content:
    type: editor
    validate:
      type: textarea
</code></pre></div>

A selectize will be a `commalist`:

filters.category:
  type: selectize
  label: Category filter
  help: Comma separated list of category names
  validate:
    type: commalist
</code></pre></div>

Validate an email address:

<div class="prism-wrapper"><pre class="language-yaml line-numbers"><code>
author.email:
    type: text
    size: large
    label: PLUGIN_ADMIN.DEFAULT_EMAIL
    help: PLUGIN_ADMIN.DEFAULT_EMAIL_HELP
    validate:
        type: email
</code></pre></div>

Make sure a value is a bool:

<div class="prism-wrapper"><pre class="language-yaml line-numbers"><code>
summary.enabled:
    type: toggle
    label: PLUGIN_ADMIN.ENABLED
    highlight: 1
    help: PLUGIN_ADMIN.ENABLED_HELP
    options:
        1: PLUGIN_ADMIN.YES
        0: PLUGIN_ADMIN.NO
    validate:
        type: bool
</code></pre></div>

Make sure a value is an integer between 0 and 65536:

<div class="prism-wrapper"><pre class="language-yaml line-numbers"><code>
summary.size:
    type: text
    size: x-small
    label: PLUGIN_ADMIN.SUMMARY_SIZE
    help: PLUGIN_ADMIN.SUMMARY_SIZE_HELP
    validate:
        type: int
        min: 0
        max: 65536
</code></pre></div>

Make sure a value is a number > 1:

<div class="prism-wrapper"><pre class="language-yaml line-numbers"><code>
pages.list.count:
    type: text
    size: x-small
    label: PLUGIN_ADMIN.DEFAULT_PAGE_COUNT
    help: PLUGIN_ADMIN.DEFAULT_PAGE_COUNT_HELP
    validate:
        type: number
        min: 1
</code></pre></div>

Validate a taxonomy type as an array:

Validate a text field as a slug:

<div class="prism-wrapper"><pre class="language-yaml line-numbers"><code>
folder:
  type: text
  label: PLUGIN_ADMIN.FOLDER_NAME
  validate:
    type: slug
</code></pre></div>

### Array Field

![Array](array_field_bp.gif)

The `array` field type is used to create a simple list of key - values objects.

Example:

<div class="prism-wrapper"><pre class="language-yaml line-numbers"><code>
metadata:
   type: array
   label: PLUGIN_ADMIN.METADATA
   help: PLUGIN_ADMIN.METADATA_HELP
   placeholder_key: PLUGIN_ADMIN.METADATA_KEY
   placeholder_value: PLUGIN_ADMIN.METADATA_VALUE
   required: true
</code></pre></div>

### Colorpicker Field

![Colorpicker](colorpicker_field.png)

The `colorpicker` field type is used to display a color picker field

Example:

<div class="prism-wrapper"><pre class="language-yaml line-numbers"><code>
color:
   type: colorpicker
   label: Choose a color
</code></pre></div>

### Columns / column Fields

![Columns](columns_field_bp.gif)

The `columns` and `column` field types are used to divide the contained form fields in columns

Example:

<div class="prism-wrapper"><pre class="language-yaml line-numbers"><code>
columns:
  type: columns
  fields:
    column1:
      type: column
      fields:

# .... subfields

column2:
      type: column
      fields:

# .... other subfields
</code></pre></div>

### Dateformat Field

![DateFormat](dateformat_field_bp.gif)

The `dateformat` field type is used to

Example:

<div class="prism-wrapper"><pre class="language-yaml line-numbers"><code>
pages.dateformat.short:
    type: dateformat
    size: medium
    classes: fancy
    label: PLUGIN_ADMIN.SHORT_DATE_FORMAT
    help: PLUGIN_ADMIN.SHORT_DATE_FORMAT_HELP
    default: "jS M Y"
    options:
        "F jS \\a\\t g:ia": Date1
        "l jS \\of F g:i A": Date2
        "D, d M Y G:i:s": Date3
        "d-m-y G:i": Date4
        "jS M Y": Date5
</code></pre></div>

### Datetime Field

![DateTime](datetime_field.gif)

The `datetime` field type is used to store and present a date and time field.

Example:

<div class="prism-wrapper"><pre class="language-yaml line-numbers"><code>
header.date:
  type: datetime
  label: PLUGIN_ADMIN.DATE
  toggleable: true
  help: PLUGIN_ADMIN.DATE_HELP
</code></pre></div>

### Editor Field

![Editor Field](editor_field_bp.gif)

The `editor` field type is used to present the Codemirror editor

Example:

<div class="prism-wrapper"><pre class="language-yaml line-numbers"><code>
frontmatter:
  classes: frontmatter
  type: editor
  label: PLUGIN_ADMIN.FRONTMATTER
  autofocus: true
  codemirror:
    mode: 'yaml'
    indentUnit: 4
    autofocus: true
    indentWithTabs: false
    lineNumbers: true
    styleActiveLine: true
    gutters: ['CodeMirror-lint-markers']
    lint: true
</code></pre></div>

### Fieldset Field

![Fieldset Field](fieldset-gif.gif)
The `fieldset` groups a set of fields inside a collapsible box.

Example:

<div class="prism-wrapper"><pre class="language-yaml line-numbers"><code>
header.fieldset:
  type: fieldset
  title: Your title
  help: Help text
  info: Info text
  text: Text inside fieldset and before other fields
  icon: comments
  collapsed: true     # Initial state of fieldset (see collapsible option)
  collapsible: true    # Whether one can expand the fieldset or not 
  fields:
    header.fieldset.an_example_text:
      type: text
      label: text
    header.fieldset.an_example_textarea:
      type: textarea
      label: textarea
</code></pre></div>

### File Field

![File Field](file_field_bp.gif)

Example:

<div class="prism-wrapper"><pre class="language-yaml line-numbers"><code>
custom_logo_login_screen:
  type: file
  label: Custom Logo Login Screen
  destination: 'user/plugins/admin-pro/assets'
  accept:
    - image/*
</code></pre></div>

<div class="prism-wrapper"><pre class="language-yaml line-numbers"><code>
custom_file:
  type: file
  label: A Label
  destination: 'user/themes/my-theme/assets'
  multiple: true
  limit: 5
  filesize: 1
  accept:
    - image/*
</code></pre></div>

<div class="table table-keycol">
| Attribute           | Description                                                                                                |
| :-----              | :-----                                                                                                     |
| `destination`       | The folder where the files will be stored, relative to the Grav root. E.g. `user/plugins/my-plugin/assets` |
| `multiple`          | Whether or not to allow more than one file per field                                                       |
| `limit`             | When `multiple` is enabled, allows to constrain the amount of files permitted to be uploaded               |
| `filesize`          | The size in MB each file is allowed                                                                        |
| `accept`            | Add a list of accepted page mime types and extensions. E.g. `["image/*", '.mp3']`                          |
| `random_name`       | Uses a random filename for each file                                                                       |
| `avoid_overwriting` | Will append a timestamp before each filename if a conflict would occur                                     |
</div>

### Filepicker Field

![Filepicker Field](filepicker_field.png)

Example:

<div class="prism-wrapper"><pre class="language-yaml line-numbers"><code>
picked_image:
  type: filepicker
  folder: 'theme@:/images/pages'
  label: Select a file
  preview_images: true
  accept:
    - .png
    - .jpg
</code></pre></div>

<div class="prism-wrapper"><pre class="language-yaml line-numbers"><code>
header.a_file:
  type: filepicker
  folder: '@self'
  preview_images: true
  label: Select a file
</code></pre></div>

### Honeypot Field

The `honeypot` field type creates a hidden field that, when filled out, will return with an error. This is a useful way to prevent bots from filling out and submitting a form.

Example:

<div class="prism-wrapper"><pre class="language-yaml line-numbers"><code>
fields:
    - name: honeypot
      type: honeypot
</code></pre></div>

A honeypot field is a popular alternative to captcha fields.

### List Field

![List Field](list_field_bp.gif)

Example:

<div class="prism-wrapper"><pre class="language-yaml line-numbers"><code>
header.buttons:
  name: buttons
  type: list
  style: vertical
  label: Buttons
  fields:
    .text:
      type: text
      label: Text
    .url:
      type: text
      label: URL
    .primary:
      type: toggle
      label: Primary
      highlight: 1
      default: 1
      options:
          1: 'Yes'
          0: 'No'
      validate:
          type: bool
</code></pre></div>

This example will generate this Admin interface:

![](field_list_1.png)

When saving the page, we'll see the following YAML added to the page frontmatter:

<div class="prism-wrapper"><pre class="language-yaml line-numbers"><code>
buttons:
    -
        text: 'Some text'
        url: 'https://getgrav.org'
        primary: false
    -
        text: 'Another text'
        url: 'https://another-url.com'
        primary: true
</code></pre></div>

This will be used in the Theme Twig to output the list in some nice way.

Another example of this field definition is this list of Features, used by Antimatter's Features Modular child page. Every feature has an icon, a header and some text:

<div class="prism-wrapper"><pre class="language-yaml line-numbers"><code>
header.features:
  name: features
  type: list
  label: Features

fields:
    .icon:
      type: text
      label: Icon
    .header:
      type: text
      label: Header
    .text:
      type: text
      label: Text
</code></pre></div>

Accessing and displaying the data of a `list` field is done with a simple twig for loop, like in the example below:

<div class="prism-wrapper"><pre class="language-twig line-numbers"><code>
{% for feature in page.header.features %}
    {{ feature.icon }}
    {{ feature.header }}
    {{ feature.text }}
{% endfor %}
</code></pre></div>

### PageMediaSelect Field

The `pagemediaselect` field type is used to allow the users to choose a media from one of the page media already uploaded through FTP or using the page media manager.

Example

<div class="prism-wrapper"><pre class="language-yaml line-numbers"><code>
header.img_link:
  label: Choose media
  type: pagemediaselect
</code></pre></div>

### Pages Field

![Pages Field](pages_field_bp.gif)

The `pages` field type shows a list of the site pages.

Example

<div class="prism-wrapper"><pre class="language-yaml line-numbers"><code>
home.alias:
    type: pages
    size: medium
    classes: fancy
    label: PLUGIN_ADMIN.HOME_PAGE
    show_all: false
    show_modular: false
    show_root: false
    help: PLUGIN_ADMIN.HOME_PAGE_HELP
</code></pre></div>

If you set `multiple` to true, you need to add `validate.type: array`. Otherwise the array of selected pages will not be saved correctly.

### Section Field

The `Section` field type is used to divide a setting page into sections.

Example:

<div class="prism-wrapper"><pre class="language-yaml line-numbers"><code>
content:
    type: section
    title: PLUGIN_ADMIN.DEFAULTS
    underline: true

fields:

#..... subfields
</code></pre></div>

### Selectize Field

![Selectize](selectize_field_bp.gif)

The `selectize` field type is used to show a hybrid of a text box and a select box. Mostly useful for tagging and other element picking fields.

Example:

### Taxonomy Field

![Taxonomy](taxonomy_field_bp.gif)

The `taxonomy` field type is a special select preconfigured to select one or more taxonomy values.

Example: