Skip to main content

Tel

The tel field allows users to input a phone number. It supports validation through a configurable pattern to ensure proper formatting.

Example

fields:
  phone_number:
    type: tel
    label: Your Phone Number
    placeholder: Enter your phone number
    pattern: '^\+?[0-9\s\-]{10,15}$'

Field Properties

Name Type Default Description
aria string –

Optional aria label for better accessibility.
autofocus bool false

Set autofocus on field.
error string | array –

Costum error message for translation or customization.
help string | array –

Optional help text below the field
label string | array –

The field label can be set as string or associative array with translations
pattern string ^[0-9+\-\s()]{8,}$

A regular expression pattern used to validate the phone number. The default pattern allows numbers, spaces, and common phone number symbols.
placeholder string | array –

Optional placeholder value that will be shown when the field is empty.
required bool –

Defines whether the field is mandatory for form submission.
title string | array –

Tooltip displayed when the user hovers over the field (supports multilingual configurations).
width string 1/1

The width of the field in the 12 columns field grid.

Validation Logic

The field validates the input against the pattern. If no pattern is provided, the default pattern (^[0-9+\-\s()]{8,}$) is used.

Valid Inputs (using the default pattern):

  • +49 123 456 789
  • 123-456-7890
  • (123) 456-7890

Invalid Inputs

  • abc123 (contains invalid characters)
  • 12345 (too short)