# Structure

Structured data input, which stores data as YAML.

****

- Read more: <https://getkirby.com/docs/guide/blueprints/fields>
- Source: <https://github.com/getkirby/kirby/tree/5.5.3/config/fields/structure.php>

****

The structure field makes it possible to add multiple complex entries to a field, which will be stored as <abbr title="YAML is a human friendly data serialization standard. In Kirby, this markup language is used to write blueprints."><a href="https://getkirby.com/docs/glossary/#yaml">YAML</a></abbr>. A typical use case would be a list of addresses, team members or a restaurant menu.

<figure class="image"><a data-lightbox href="https://assets.getkirby.com/media/pages/docs/reference/panel/fields/structure/f40d76be0f-1717846665/structure.png?width=1416&amp;height=620&amp;enlarge=0"><img alt="" class="rounded" height="405" loading="lazy" sizes="auto" src="https://assets.getkirby.com/media/pages/docs/reference/panel/fields/structure/f40d76be0f-1717846665/structure.png?width=924&amp;height=405&amp;enlarge=0" srcset="https://assets.getkirby.com/media/pages/docs/reference/panel/fields/structure/f40d76be0f-1717846665/structure.png?width=462&amp;height=202&amp;enlarge=0 462w, https://assets.getkirby.com/media/pages/docs/reference/panel/fields/structure/f40d76be0f-1717846665/structure.png?width=690&amp;height=302&amp;enlarge=0 690w, https://assets.getkirby.com/media/pages/docs/reference/panel/fields/structure/f40d76be0f-1717846665/structure.png?width=924&amp;height=405&amp;enlarge=0 924w, https://assets.getkirby.com/media/pages/docs/reference/panel/fields/structure/f40d76be0f-1717846665/structure.png?width=1380&amp;height=604&amp;enlarge=0 1380w, https://assets.getkirby.com/media/pages/docs/reference/panel/fields/structure/f40d76be0f-1717846665/structure.png?width=1416&amp;height=620&amp;enlarge=0 1848w" width="924"></a></figure>

## Example

```yaml
fields:
  addresses:
    label: Addresses
    type: structure
    fields:
      street:
        label: Street
        type: text
      zip:
        label: ZIP
        type: text
      city:
        label: City
        type: text
```

Such a structure will be stored in the content file like this:

```yaml
addresses:
-
  street: Rue de WTF 17
  zip:    1112
  city:   Monaco
-
  street: 1212 Broadway
  zip:    4321
  city:   New York
-
  street: At the beach
  zip:    9999
  city:   The capitol of the Bahamas
```

If you need to store a single object instead of a list of objects, take a look at the <a href="https://getkirby.com/docs/reference/panel/fields/object">object field</a>.

## Field properties



<div class="table">
	<table class="parameters">
		<thead>
			<tr>
				<th>Name</th>
				<th>Type</th>
				<th>Default</th>

								<th>Description</th>
							</tr>
		</thead>
		<tbody>
						<tr>
				<td>
					batch				</td>
				<td><code class="type type-bool">bool</code></td>

				<td data-label="Default:">
															<code>false</code>
									</td>

								<td>Whether to enable batch editing</td>
							</tr>
						<tr>
				<td>
					columns				</td>
				<td><code class="type type-array">array</code></td>

				<td data-label="Default:">
															<code>[ ]</code>
									</td>

								<td>Optional columns definition to only show selected fields in the structure table.</td>
							</tr>
						<tr>
				<td>
					default				</td>
				<td><code class="type type-array">array</code></td>

				<td data-label="Default:">
															<code>null</code>
									</td>

								<td>Set the default rows for the structure</td>
							</tr>
						<tr>
				<td>
					disabled				</td>
				<td><code class="type type-bool">bool</code></td>

				<td data-label="Default:">
															<code>null</code>
									</td>

								<td>If <code class="type type-bool">true</code>, the field is no longer editable and will not be saved</td>
							</tr>
						<tr>
				<td>
					duplicate				</td>
				<td><code class="type type-bool">bool</code></td>

				<td data-label="Default:">
															<code>true</code>
									</td>

								<td>Toggles duplicating rows for the structure</td>
							</tr>
						<tr>
				<td>
					empty				</td>
				<td><code class="type type-mixed">mixed</code></td>

				<td data-label="Default:">
															<code>null</code>
									</td>

								<td>The placeholder text if no items have been added yet</td>
							</tr>
						<tr>
				<td>
					fields				</td>
				<td><code class="type type-array">array</code></td>

				<td data-label="Default:">
															<code>[ ]</code>
									</td>

								<td>Fields setup for the structure form. Works just like fields in regular forms.</td>
							</tr>
						<tr>
				<td>
					help				</td>
				<td><code class="type type-mixed">mixed</code></td>

				<td data-label="Default:">
															<code>null</code>
									</td>

								<td>Optional help text below the field</td>
							</tr>
						<tr>
				<td>
					label				</td>
				<td><code class="type type-mixed">mixed</code></td>

				<td data-label="Default:">
															<code>null</code>
									</td>

								<td>The field label can be set as string or associative array with translations</td>
							</tr>
						<tr>
				<td>
					limit				</td>
				<td><code class="type type-int">int</code></td>

				<td data-label="Default:">
															<code>null</code>
									</td>

								<td>The number of entries that will be displayed on a single page. Afterwards pagination kicks in.</td>
							</tr>
						<tr>
				<td>
					max				</td>
				<td><code class="type type-int">int</code></td>

				<td data-label="Default:">
															<code>null</code>
									</td>

								<td>Maximum allowed entries in the structure. Afterwards the "Add" button will be switched off.</td>
							</tr>
						<tr>
				<td>
					min				</td>
				<td><code class="type type-int">int</code></td>

				<td data-label="Default:">
															<code>null</code>
									</td>

								<td>Minimum required entries in the structure</td>
							</tr>
						<tr>
				<td>
					prepend				</td>
				<td><code class="type type-bool">bool</code></td>

				<td data-label="Default:">
															<code>null</code>
									</td>

								<td>Toggles adding to the top or bottom of the list</td>
							</tr>
						<tr>
				<td>
					required				</td>
				<td><code class="type type-bool">bool</code></td>

				<td data-label="Default:">
															<code>null</code>
									</td>

								<td>If <code class="type type-bool">true</code>, the field has to be filled in correctly to be saved.</td>
							</tr>
						<tr>
				<td>
					sortBy				</td>
				<td><code class="type type-string">string</code></td>

				<td data-label="Default:">
															<code>null</code>
									</td>

								<td>Sorts the entries by the given field and order (i.e. <code class="type">title desc</code>) Drag &amp; drop is disabled in this case</td>
							</tr>
						<tr>
				<td>
					sortable				</td>
				<td><code class="type type-bool">bool</code></td>

				<td data-label="Default:">
															<code>null</code>
									</td>

								<td>Toggles drag &amp; drop sorting</td>
							</tr>
						<tr>
				<td>
					translate				</td>
				<td><code class="type type-bool">bool</code></td>

				<td data-label="Default:">
															<code>true</code>
									</td>

								<td>If <code class="type type-bool">false</code>, the field will be disabled in non-default languages and cannot be translated. This is only relevant in multi-language setups.</td>
							</tr>
						<tr>
				<td>
					when				</td>
				<td><code class="type type-mixed">mixed</code></td>

				<td data-label="Default:">
															<code>null</code>
									</td>

								<td>Conditions when the field will be shown (since 3.1.0)</td>
							</tr>
						<tr>
				<td>
					width				</td>
				<td><code class="type type-string">string</code></td>

				<td data-label="Default:">
															<code>'1/1'</code>
									</td>

								<td>The width of the field in the field grid, e.g. <code class="type">1/1</code>, <code class="type">1/2</code>, <code class="type">1/3</code>, <code class="type">1/4</code>, <code class="type">2/3</code>, <code class="type">3/4</code></td>
							</tr>
					</tbody>
	</table>
</div>

## Fields

You can define any number of fields and use the same <a href="https://getkirby.com/docs/reference/panel/fields">field types listed</a>:

<nav class="auto-fill mb-12 text-sm" style="--min: 20rem; --gap: var(--spacing-1)">
		<a class="block p-3 bg-light" href="https://getkirby.com/docs/reference/panel/fields/blocks" style="text-decoration: none">
		<strong class="block">Blocks</strong>
		A visual editor for long-form text and modular pages	</a>
		<a class="block p-3 bg-light" href="https://getkirby.com/docs/reference/panel/fields/checkboxes" style="text-decoration: none">
		<strong class="block">Checkboxes</strong>
		A list of checkbox fields	</a>
		<a class="block p-3 bg-light" href="https://getkirby.com/docs/reference/panel/fields/color" style="text-decoration: none">
		<strong class="block">Color</strong>
		The color field supports multiple color notations, a color picker, pre-defined colors, custom color names, and transparency.	</a>
		<a class="block p-3 bg-light" href="https://getkirby.com/docs/reference/panel/fields/date" style="text-decoration: none">
		<strong class="block">Date</strong>
		A date picker field	</a>
		<a class="block p-3 bg-light" href="https://getkirby.com/docs/reference/panel/fields/email" style="text-decoration: none">
		<strong class="block">Email</strong>
		An email input field with validation	</a>
		<a class="block p-3 bg-light" href="https://getkirby.com/docs/reference/panel/fields/entries" style="text-decoration: none">
		<strong class="block">Entries</strong>
		The entries field allows you to create and manage multiple entries for the same field.	</a>
		<a class="block p-3 bg-light" href="https://getkirby.com/docs/reference/panel/fields/files" style="text-decoration: none">
		<strong class="block">Files</strong>
		A files select field that allows you to select one or more files out of a given set. A reference to this file is stored in the content file.	</a>
		<a class="block p-3 bg-light" href="https://getkirby.com/docs/reference/panel/fields/gap" style="text-decoration: none">
		<strong class="block">Gap</strong>
		Layout field to create gaps in the field grid.	</a>
		<a class="block p-3 bg-light" href="https://getkirby.com/docs/reference/panel/fields/headline" style="text-decoration: none">
		<strong class="block">Headline</strong>
		Creates a headline to group fields	</a>
		<a class="block p-3 bg-light" href="https://getkirby.com/docs/reference/panel/fields/hidden" style="text-decoration: none">
		<strong class="block">Hidden</strong>
		Creates a hidden field	</a>
		<a class="block p-3 bg-light" href="https://getkirby.com/docs/reference/panel/fields/info" style="text-decoration: none">
		<strong class="block">Info</strong>
		A plain HTML field for user instructions	</a>
		<a class="block p-3 bg-light" href="https://getkirby.com/docs/reference/panel/fields/layout" style="text-decoration: none">
		<strong class="block">Layout</strong>
		A visual editor for complex multi-column layouts	</a>
		<a class="block p-3 bg-light" href="https://getkirby.com/docs/reference/panel/fields/line" style="text-decoration: none">
		<strong class="block">Line</strong>
		Draws a horizontal line to separate fields	</a>
		<a class="block p-3 bg-light" href="https://getkirby.com/docs/reference/panel/fields/link" style="text-decoration: none">
		<strong class="block">Link</strong>
		Use the link field to create links to external URLs, internal pages, files, email addresses and telephone numbers. The link field is also used in the link dialogs of the writer and textarea fields.	</a>
		<a class="block p-3 bg-light" href="https://getkirby.com/docs/reference/panel/fields/list" style="text-decoration: none">
		<strong class="block">List</strong>
		A simple WYSIWYG editor field for ordered and unordered lists	</a>
		<a class="block p-3 bg-light" href="https://getkirby.com/docs/reference/panel/fields/multiselect" style="text-decoration: none">
		<strong class="block">Multiselect</strong>
		A select field that allows you to select multiple options	</a>
		<a class="block p-3 bg-light" href="https://getkirby.com/docs/reference/panel/fields/number" style="text-decoration: none">
		<strong class="block">Number</strong>
		A number input field with validation	</a>
		<a class="block p-3 bg-light" href="https://getkirby.com/docs/reference/panel/fields/object" style="text-decoration: none">
		<strong class="block">Object</strong>
		Structured object input, which stores properties as YAML.	</a>
		<a class="block p-3 bg-light" href="https://getkirby.com/docs/reference/panel/fields/pages" style="text-decoration: none">
		<strong class="block">Pages</strong>
		A pages select field that allows to select one or multiple related pages	</a>
		<a class="block p-3 bg-light" href="https://getkirby.com/docs/reference/panel/fields/radio" style="text-decoration: none">
		<strong class="block">Radio</strong>
		A list of radio buttons	</a>
		<a class="block p-3 bg-light" href="https://getkirby.com/docs/reference/panel/fields/range" style="text-decoration: none">
		<strong class="block">Range</strong>
		A handy slider	</a>
		<a class="block p-3 bg-light" href="https://getkirby.com/docs/reference/panel/fields/select" style="text-decoration: none">
		<strong class="block">Select</strong>
		A simple selectbox field	</a>
		<a class="block p-3 bg-light" href="https://getkirby.com/docs/reference/panel/fields/slug" style="text-decoration: none">
		<strong class="block">Slug</strong>
		A slug input field	</a>
		<a class="block p-3 bg-light" href="https://getkirby.com/docs/reference/panel/fields/stats" style="text-decoration: none">
		<strong class="block">Stats</strong>
		Show beautiful stats for your site or shop: revenues, orders, likes, views, etc.	</a>
		<a class="block p-3 bg-light" href="https://getkirby.com/docs/reference/panel/fields/structure" style="text-decoration: none">
		<strong class="block">Structure</strong>
		Structured data input, which stores data as YAML.	</a>
		<a class="block p-3 bg-light" href="https://getkirby.com/docs/reference/panel/fields/tags" style="text-decoration: none">
		<strong class="block">Tags</strong>
		An interactive tags input field with autocompletion	</a>
		<a class="block p-3 bg-light" href="https://getkirby.com/docs/reference/panel/fields/tel" style="text-decoration: none">
		<strong class="block">Tel</strong>
		A phone number input field	</a>
		<a class="block p-3 bg-light" href="https://getkirby.com/docs/reference/panel/fields/text" style="text-decoration: none">
		<strong class="block">Text</strong>
		A standard, single-line input field	</a>
		<a class="block p-3 bg-light" href="https://getkirby.com/docs/reference/panel/fields/textarea" style="text-decoration: none">
		<strong class="block">Textarea</strong>
		A textarea field, which auto-resizes and has built-in format buttons.	</a>
		<a class="block p-3 bg-light" href="https://getkirby.com/docs/reference/panel/fields/time" style="text-decoration: none">
		<strong class="block">Time</strong>
		A time picker field	</a>
		<a class="block p-3 bg-light" href="https://getkirby.com/docs/reference/panel/fields/toggle" style="text-decoration: none">
		<strong class="block">Toggle</strong>
		Yes/no or on/off toggle	</a>
		<a class="block p-3 bg-light" href="https://getkirby.com/docs/reference/panel/fields/toggles" style="text-decoration: none">
		<strong class="block">Toggles</strong>
		Toggle between different states	</a>
		<a class="block p-3 bg-light" href="https://getkirby.com/docs/reference/panel/fields/url" style="text-decoration: none">
		<strong class="block">Url</strong>
		A URL input field with validation	</a>
		<a class="block p-3 bg-light" href="https://getkirby.com/docs/reference/panel/fields/users" style="text-decoration: none">
		<strong class="block">Users</strong>
		A user select field that allows to select one or multiple users	</a>
		<a class="block p-3 bg-light" href="https://getkirby.com/docs/reference/panel/fields/writer" style="text-decoration: none">
		<strong class="block">Writer</strong>
		A simple WYSIWYG editor field for inline content with formats like bold, italic, etc.	</a>
	</nav>

<info>
Each field value is stored like in a normal Kirby content file. This means that all field types are supported, however all of their values are converted to strings. For most fields there is no difference, but fields with structured data will *not* be nested inside the same YAML data structure. This ensures broad compatibility.
</info>

## Default values

You can set default values for structure fields which will prepopulate the field:

```yaml
fields:
  emails:
    label: Emails
    type: structure
    default:
      - email: bastian@getkirby.com
      - email: lukas@getkirby.com
      - email: nico@getkirby.com
      - email: sonja@getkirby.com
    fields:
      email:
        label: Email
        type: email
```

## Table columns

You can define the columns that are shown in the table. This is especially useful if you have a lot of fields in your structure and you don't want to show them all on first sight, but still keep them editable. Columns can also change the text alignment, set a custom width and define a before and after text that will be prepended or appended to the value.

| Option | Value | Description |
|--------|-------|-------------|
| `width`| any fraction, e.g. `1/2`, `1/3`, `1/4`, `2/3`, `3/4` | Set width of column
| `align` | `left`, `center`, `right` | Set text alignment
| `before`| `string` | Set text to prepend value
| `after` | `string` | Set text to append value
| `mobile` | `true` | Set visible in mobile view

### Example

```yaml
fields:
  holidays:
    type: structure
    columns:
      title:
        width: 1/4
      images:
        width: 1/2
      price:
        width: 1/4
        align: right
        after: "USD"
    fields:
      title:
        type: text
      images:
        type: files
      description:
        type: textarea
      price:
        type: number
```

Structure columns can be set to any fraction and will be automatically calculated into the right width.

```yaml
fields:
  mystructure:
    label: Structure
    type: structure
    columns:
      title:
        width: 3/5
      images:
        width: 1/5
      price:
        width: 1/10
    fields:
      title:
        label: A
        type: text
      images:
        label: B
        type: text
      price:
        label: C
        type: text
```

You can also define columns without additional options if you want to use the defaults. You can still combine this with options for other columns:

```yaml
fields:
  holidays:
    type: structure
    columns:
      title: true
      images: true
      price:
        align: right
        after: "USD"
    fields:
      title:
        type: text
      images:
        type: files
      description:
        type: textarea
      price:
        type: number
```

### Hide toggle field text in preview

When using toggle fields within structures, displaying the field's text in the preview can sometimes look cluttered. You can hide the text with the `text` option in the columns' definition.

```yaml
fields:
  structure:
    columns:
      a:
        text: false
      b:
        text: false
    fields:
      a:
        type: toggle
      b:
        type: toggle
        text: this is some long text
```

### Set columns to visible on mobile

The `mobile` option keeps cells in responsive views. If none of the columns are set to `mobile`, only the first column will be visible on mobile.

```yaml
fields:
  structure:
    columns:
      image:
        type: image
      title:
        type: text
        mobile: true
      date:
        type: date
        mobile: true
    fields:
      image:
        type: files
      title:
        type: text
      date:
        type: date
```

## Preview of fields in the table

The structure field tries to create the best possible preview for the field in its table view. If you are using fields provided by a plugin in the structure field, the preview of these can be customized with a <a href="https://getkirby.com/docs/reference/plugins/extensions/field-previews">field preview extension</a>.

<since v="5.1.0">
## Batch delete

You can activate the batch delete mode for structure fields by using the `batch` option in your blueprint:

```yaml
fields:
  structure:
	  batch: true
```

</since>

## How to use in templates/snippets

To access a structure field in your templates, you can use the [`yaml()`](/docs/reference/templates/field-methods/yaml) and [`toStructure()`](/docs/reference/templates/field-methods/to-structure) methods.

Let's say we wanted to render the `holidays` structure field example from above in a template:

```php
<?php
// using the `toStructure()` method, we create a structure collection
$items = $page->holidays()->toStructure();
// we can then loop through the entries and render the individual fields
foreach ($items as $item): ?>
  <h2><?= $item->title()->html() ?></h2>
  <?php foreach ($item->images()->toFiles() as $image): ?>
    <img src="<?= $image->crop(400)->url() ?>">
  <?php endforeach ?>
  <p><?= $item->price() ?></p>
<?php endforeach ?>
```

<info>
If you nest structure fields inside a structure field, you have to call the `toStructure()` method on the nested fields as well and then loop through the nested items like above.
</info>

## More information

<a href="https://getkirby.com/docs/cookbook/content-structure/structured-field-content">Structured field content</a>