Tel
A phone number input field
The phone field creates a text input with the type tel
and a custom phone icon.
Example
Field properties
Name | Type | Default | Description |
---|---|---|---|
after | – | Optional text that will be shown after the input | |
autocomplete | string |
tel |
Sets the HTML5 autocomplete attribute |
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 |
phone |
Changes the phone icon |
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 | – | Optional placeholder value that will be shown when the field is empty | |
required | bool |
– | If true , the field has to be filled in correctly to be saved. |
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
|
How to use in templates/snippets
Just printing the phone number:
Generating an a
tag for the phone number: