A phone number input field

The phone field creates a text input with the type tel and a custom phone icon.


    label: Phone
    type: tel

Field properties

Property Type Default Description

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


Optional text that will be shown before the input


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


Optional help text below the field

icon string phone

Changes the phone icon


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


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.


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:

<?php if ($page->phone()->isNotEmpty()): ?>
  <dd>$page->phone() ?></dd>
<?php endif ?>

Generating an a tag for the phone number:

<?php if ($page->phone()->isNotEmpty()): ?>
  <dd><?= Html::tel($page->phone()) ?></dd>
<?php endif ?>