Skip to content

Kirby 5.0.4

Tel

A phone number input field

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

Example

fields:
  phone:
    label: Phone
    type: tel

Field properties

Name Type Default Description
$after mixed null Optional text that will be shown after the input
$autocomplete string 'tel' Sets the HTML5 autocomplete attribute
$autofocus bool null Sets the focus on this field when the form loads. Only the first field with this label gets
$before mixed null Optional text that will be shown before the input
$default mixed null Default value for the field, which will be used when a page/file/user is created
$disabled bool null If true, the field is no longer editable and will not be saved
$font string null Sets the font family (sans or monospace)
$help mixed null Optional help text below the field
$icon string 'phone' Changes the phone icon
$label mixed null The field label can be set as string or associative array with translations
$maxlength int null Maximum number of allowed characters
$minlength int null Minimum number of required characters
$pattern string null A regular expression, which will be used to validate the input
$placeholder mixed null Optional placeholder value that will be shown when the field is empty
$required bool null 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 mixed null Conditions when the field will be shown (since 3.1.0)
$width string '1/1' The width of the field in the field grid, e.g. 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()): ?>
  <dt>Phone</dt>
  <dd><?= $page->phone() ?></dd>
<?php endif ?>

Generating an a tag for the phone number:

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