Radical Design Course by Jack McDade

From the creator of Statamic

Learn how to make your websites standout and be remembered.

This course is the most refreshing take on teaching design that I've come across.

— Mikaël Sévigny, Developer

Array Fieldtype

Manage data in a key:value array format.

Array Fieldtype UI
The Array Fieldtype in action!


This fieldtype is used to manage key: value array data in the right situation. It's used for situations when there is data you would like to stay grouped together because there's only one set and you don't want to use loops.

If you'd like to have lists of this type of data, you might want to use a grid or replicator field.


The screenshot above depicts the two modes you can choose from. One for when you know there is a fixed set of keys (keyed), and one for when you don't (dynamic).

Keyed Mode

The first field contains pre-defined keys. This will give the user a stricter input. They can only enter the values for the specified keys, and they cannot be reordered.

type: array
street: Street
city: City
country: Country

The keys can be specified with or without labels. The snippet above (and what's shown in the screenshot) uses labels.

The following is an example of just keys. When using this syntax, the key and the label will be identical.

- street
- city
- country

Dynamic Mode

The second field contains no pre-defined keys. This will allow the user to define them on the fly and re-arrange them.

type: array

Column headings can be set with value_header & key_header.

value_header: Type of Bacon
key_header: Why is it awesome?

Data Structure

In the example above, both fields would save the exact same data.

street: 221B Baker Street
city: London
country: England


This fieldtype is not augmented.

You can use basic array access, nested variables, or the foreach tag to loop through all of the keys. All three of the following methods are equivalent.

// Array access
{{ address }}
{{ street }} {{ city }} {{ country }}
{{ /address }}
// Nested variables
{{ address:street }} {{ address:city }} {{ address:country }}
// Foreach tag:
{{ foreach:address }}
{{ value }}
{{ /foreach:address }}




Define keys when using keyed mode. Default: null.



Determine which mode to use. Default: dynamic.



Value column heading displayed when using dynamic mode Default: Value.



Key column heading displayed when using dynamic mode Default: Key.



Add button text customization. Default: Add Row.

Docs feedback

Submit improvements, related content, or suggestions through Github.

Betterify this page →