# Email

An email input field with validation

****

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

****

The email field provides the most comfortable way to insert email addresses and has built-in validation for entered addresses.

<figure class="image"><a data-lightbox href="https://assets.getkirby.com/media/pages/docs/reference/panel/fields/email/e5aa900dd7-1717846665/email.png?width=1416&amp;height=328&amp;enlarge=0"><img alt="" class="rounded" height="214" loading="lazy" sizes="auto" src="https://assets.getkirby.com/media/pages/docs/reference/panel/fields/email/e5aa900dd7-1717846665/email.png?width=924&amp;height=214&amp;enlarge=0" srcset="https://assets.getkirby.com/media/pages/docs/reference/panel/fields/email/e5aa900dd7-1717846665/email.png?width=462&amp;height=107&amp;enlarge=0 462w, https://assets.getkirby.com/media/pages/docs/reference/panel/fields/email/e5aa900dd7-1717846665/email.png?width=690&amp;height=160&amp;enlarge=0 690w, https://assets.getkirby.com/media/pages/docs/reference/panel/fields/email/e5aa900dd7-1717846665/email.png?width=924&amp;height=214&amp;enlarge=0 924w, https://assets.getkirby.com/media/pages/docs/reference/panel/fields/email/e5aa900dd7-1717846665/email.png?width=1380&amp;height=320&amp;enlarge=0 1380w, https://assets.getkirby.com/media/pages/docs/reference/panel/fields/email/e5aa900dd7-1717846665/email.png?width=1416&amp;height=328&amp;enlarge=0 1848w" width="924"></a></figure>

## Example

```yaml
fields:
  email:
    label: Email
    type: email
```

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

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

								<td>Sets the HTML5 autocomplete mode for 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>
					font				</td>
				<td><code class="type type-string">string</code></td>

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

								<td>Sets the font family (sans or monospace)</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>'email'</code>
									</td>

								<td>Changes the email icon to something custom</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>
					maxlength				</td>
				<td><code class="type type-int">int</code></td>

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

								<td>Maximum number of allowed characters</td>
							</tr>
						<tr>
				<td>
					minlength				</td>
				<td><code class="type type-int">int</code></td>

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

								<td>Minimum number of required characters</td>
							</tr>
						<tr>
				<td>
					pattern				</td>
				<td><code class="type type-string">string</code></td>

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

								<td>A regular expression, which will be used to validate the input</td>
							</tr>
						<tr>
				<td>
					placeholder				</td>
				<td><code class="type type-mixed">mixed</code></td>

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

								<td>Custom placeholder text, 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>
					spellcheck				</td>
				<td><code class="type type-bool">bool</code></td>

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

								<td>If <code class="type type-bool">false</code>, spellcheck will be switched off</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>

## Use in templates: Encode email field output

Unlike the <a href="https://getkirby.com/docs/reference/text/kirbytags/email">email KirbyTag</a>, the email field does not encode your email addresses to prevent misuse by spam bots. If you want to make use of Kirby's built-in email obfuscation, you have several options:

### Using `Html::email()`

```php
<?= Html::email($page->email()) ?>
```

### Using `Str::encode()`

```php
<a href="mailto:<?= Str::encode($page->email()) ?>">
    <?= Str::encode($page->email()) ?>
</a>
```

### Using `kirbytag()`

```php
<?= kirbytag([
      'email' => $page->email(),
      'text'  => 'Contact us'
    ]);
?>
```