An email input field with validation
The email field provides the most comfortable way to insert email addresses and has built-in validation for entered addresses.
Example
Field properties
Name | Type | Default | Description |
---|---|---|---|
after | – | Optional text that will be shown after the input | |
autocomplete | string |
email |
Sets the HTML5 autocomplete mode for the input |
autofocus | bool |
– | Sets the focus on this field when the form loads. Only the first field with this label gets |
before | – | Optional text that will be shown before the input | |
default | – | Default value for the field, which will be used when a page/file/user is created | |
disabled | bool |
– | If true , the field is no longer editable and will not be saved |
font | string |
– | Sets the font family (sans or monospace) |
help | – | Optional help text below the field | |
icon | string |
email |
Changes the email icon to something custom |
label | – | The field label can be set as string or associative array with translations | |
maxlength | int |
– | Maximum number of allowed characters |
minlength | int |
– | Minimum number of required characters |
pattern | string |
– | A regular expression, which will be used to validate the input |
placeholder | – | Custom placeholder text, when the field is empty. | |
required | bool |
– | If true , the field has to be filled in correctly to be saved. |
spellcheck | bool |
false |
If false , spellcheck will be switched off |
translate | bool |
true |
If false , the field will be disabled in non-default languages and cannot be translated. This is only relevant in multi-language setups. |
when | – | Conditions when the field will be shown (since 3.1.0) | |
width | string |
1/1 |
The width of the field in the field grid. Available widths: 1/1 , 1/2 , 1/3 , 1/4 , 2/3 , 3/4
|
Use in templates: Encode email field output
Unlike the email KirbyTag, 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: