# List

A simple WYSIWYG editor field for ordered and unordered lists

****

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

****

<figure class="image"><a data-lightbox href="https://assets.getkirby.com/media/pages/docs/reference/panel/fields/list/ad23a196ff-1717846665/list.png?width=1416&amp;height=412&amp;enlarge=0"><img alt="" class="rounded" height="269" loading="lazy" sizes="auto" src="https://assets.getkirby.com/media/pages/docs/reference/panel/fields/list/ad23a196ff-1717846665/list.png?width=924&amp;height=269&amp;enlarge=0" srcset="https://assets.getkirby.com/media/pages/docs/reference/panel/fields/list/ad23a196ff-1717846665/list.png?width=462&amp;height=134&amp;enlarge=0 462w, https://assets.getkirby.com/media/pages/docs/reference/panel/fields/list/ad23a196ff-1717846665/list.png?width=690&amp;height=201&amp;enlarge=0 690w, https://assets.getkirby.com/media/pages/docs/reference/panel/fields/list/ad23a196ff-1717846665/list.png?width=924&amp;height=269&amp;enlarge=0 924w, https://assets.getkirby.com/media/pages/docs/reference/panel/fields/list/ad23a196ff-1717846665/list.png?width=1380&amp;height=402&amp;enlarge=0 1380w, https://assets.getkirby.com/media/pages/docs/reference/panel/fields/list/ad23a196ff-1717846665/list.png?width=1416&amp;height=412&amp;enlarge=0 1848w" width="924"></a></figure>

## Example

```yaml
fields:
  list:
    label: List
    type: list
```

## 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>
					after				</td>
				<td><code class="type type-mixed">mixed</code></td>

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

								<td>Optional text that will be shown after the input</td>
							</tr>
						<tr>
				<td>
					autofocus				</td>
				<td><code class="type type-bool">bool</code></td>

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

								<td>Sets the focus on this field when the form loads. Only the first field with this label gets</td>
							</tr>
						<tr>
				<td>
					before				</td>
				<td><code class="type type-mixed">mixed</code></td>

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

								<td>Optional text that will be shown before the input</td>
							</tr>
						<tr>
				<td>
					default				</td>
				<td><code class="type type-mixed">mixed</code></td>

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

								<td>Default value for the field, which will be used when a page/file/user is created</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>
					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>
					icon				</td>
				<td><code class="type type-string">string</code></td>

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

								<td>Optional icon that will be shown at the end of 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>
					marks				</td>
				<td><code class="type type-mixed">mixed</code></td>

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

								<td>Sets the allowed HTML formats. Available formats: <code class="type">bold</code>, <code class="type">italic</code>, <code class="type">underline</code>, <code class="type">strike</code>, <code class="type">code</code>, <code class="type">link</code>. Activate them all by passing <code class="type type-bool">true</code>. Deactivate them all by passing <code class="type type-bool">false</code></td>
							</tr>
						<tr>
				<td>
					nodes				</td>
				<td><code class="type type-mixed">mixed</code></td>

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

								<td>Sets the allowed nodes. Available nodes: <code class="type">bulletList</code>, <code class="type">orderedList</code></td>
							</tr>
						<tr>
				<td>
					placeholder				</td>
				<td><code class="type type-mixed">mixed</code></td>

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

								<td>Optional placeholder value that will be shown when the field is empty</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>
					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>

## Choosing available marks

The list field supports the following marks by default:

- `bold`
- `italic`
- `underline`
- `strike`
- `code`
- `link`
- `email`

```yaml
fields:
  list:
    type: list
    marks:
        - bold
        - italic
        - strike
```

## How to use in templates/snippets

The content of the list field is stored as plain HTML. To render the field in your template, echo the value.

```php
<?= $page->list() ?>
```