From 195c98571fd6128d47c40cc99fea637232ea43ce Mon Sep 17 00:00:00 2001 From: Marc Jauvin Date: Wed, 14 Jan 2026 17:21:01 -0500 Subject: [PATCH 1/3] document phone form field --- backend/forms.md | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/backend/forms.md b/backend/forms.md index 090b7bf4..87777410 100644 --- a/backend/forms.md +++ b/backend/forms.md @@ -613,6 +613,34 @@ user_password: type: password ``` +### Phone + +`phone` – renders a single-line input for phone values with built-in browser validation. + +```yaml +telephone: + label: Phone number + type: phone + pattern: "[0-9]{3}[0-9]{3}[0-9]{4}" + placeholder: xxx-xxx-xxxx + maxlength: 20 + minlength: 12 + size: 20 + required: true + options: + 514-123-4567: First Test Phone Number + 800-111-2222: Second Test Phone Number +``` + +- Displays a phone icon on the left in both edit and preview modes. +- In preview mode, renders as a clickable link that opens a phone dialing screen on mobile. +- Supports all standard HTML5 attributes for ``: + - `placeholder`, `maxlength`, `minlength`, `pattern`, `size`, `list`, `autocomplete`, `required`, `readonly`, `disabled` +- `options` will be rendered in a `` element, enabling autocomplete suggestions. +- If an option's value and label are identical, the label is omitted for brevity. + +See [Defining field options](#defining-field-options) for the different methods to specify the options. + ### Radio List `radio` - renders a list of radio options, where only one item can be selected at a time. From d56adb8d02678ff13bc2750288edf07eb3283a56 Mon Sep 17 00:00:00 2001 From: Marc Jauvin Date: Sat, 24 Jan 2026 08:50:51 -0500 Subject: [PATCH 2/3] phone -> tel --- backend/forms.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/backend/forms.md b/backend/forms.md index 87777410..0a1c1cb7 100644 --- a/backend/forms.md +++ b/backend/forms.md @@ -613,14 +613,14 @@ user_password: type: password ``` -### Phone +### Tel -`phone` – renders a single-line input for phone values with built-in browser validation. +`tel` – renders a single-line input for phone values with built-in browser validation. ```yaml telephone: label: Phone number - type: phone + type: tel pattern: "[0-9]{3}[0-9]{3}[0-9]{4}" placeholder: xxx-xxx-xxxx maxlength: 20 From 7f67d3c13da081610ecadc44f901bd81002da944 Mon Sep 17 00:00:00 2001 From: Marc Jauvin Date: Tue, 27 Jan 2026 13:26:37 -0500 Subject: [PATCH 3/3] move Tel field doc to proper section --- backend/forms.md | 59 ++++++++++++++++++++++++------------------------ 1 file changed, 30 insertions(+), 29 deletions(-) diff --git a/backend/forms.md b/backend/forms.md index 0a1c1cb7..04b7659d 100644 --- a/backend/forms.md +++ b/backend/forms.md @@ -282,6 +282,7 @@ There are various native field types that can be used for the **type** setting. - [Range](#range) - [Section](#section) - [Switch](#switch) +- [Tel](#tel) - [Text](#text) - [Textarea](#textarea) - [Widget](#widget) @@ -613,35 +614,6 @@ user_password: type: password ``` -### Tel - -`tel` – renders a single-line input for phone values with built-in browser validation. - -```yaml -telephone: - label: Phone number - type: tel - pattern: "[0-9]{3}[0-9]{3}[0-9]{4}" - placeholder: xxx-xxx-xxxx - maxlength: 20 - minlength: 12 - size: 20 - required: true - options: - 514-123-4567: First Test Phone Number - 800-111-2222: Second Test Phone Number -``` - -- Displays a phone icon on the left in both edit and preview modes. -- In preview mode, renders as a clickable link that opens a phone dialing screen on mobile. -- Supports all standard HTML5 attributes for ``: - - `placeholder`, `maxlength`, `minlength`, `pattern`, `size`, `list`, `autocomplete`, `required`, `readonly`, `disabled` -- `options` will be rendered in a `` element, enabling autocomplete suggestions. -- If an option's value and label are identical, the label is omitted for brevity. - -See [Defining field options](#defining-field-options) for the different methods to specify the options. - -### Radio List `radio` - renders a list of radio options, where only one item can be selected at a time. @@ -709,6 +681,35 @@ show_content: off: myauthor.myplugin::lang.models.mymodel.show_content.off ``` +### Tel + +`tel` – renders a single-line input for phone values with built-in browser validation. + +```yaml +telephone: + label: Phone number + type: tel + pattern: "[0-9]{3}[0-9]{3}[0-9]{4}" + placeholder: xxx-xxx-xxxx + maxlength: 20 + minlength: 12 + size: 20 + required: true + options: + 514-123-4567: First Test Phone Number + 800-111-2222: Second Test Phone Number +``` + +- Displays a phone icon on the left in both edit and preview modes. +- In preview mode, renders as a clickable link that opens a phone dialing screen on mobile. +- Supports all standard HTML5 attributes for ``: + - `placeholder`, `maxlength`, `minlength`, `pattern`, `size`, `list`, `autocomplete`, `required`, `readonly`, `disabled` +- `options` will be rendered in a `` element, enabling autocomplete suggestions. +- If an option's value and label are identical, the label is omitted for brevity. + +See [Defining field options](#defining-field-options) for the different methods to specify the options. + +### Radio List ### Text `text` - renders a single line text box. This is the default type used if none is specified.