Skip to content

Document phone form field #255

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mjauvin wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

Document phone form field #255

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions backend/forms.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
```
Comment on lines +620 to +633
Copy link

@coderabbitai coderabbitai bot Jan 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Pattern and placeholder mismatch.

The pattern attribute specifies [0-9]{3}[0-9]{3}[0-9]{4} (10 consecutive digits), but the placeholder shows xxx-xxx-xxxx (with hyphens). This mismatch may confuse users, as input with hyphens would fail validation against the pattern.

🔧 Suggested fix options

Option 1: Adjust the pattern to accept hyphens:

-    pattern: "[0-9]{3}[0-9]{3}[0-9]{4}"
+    pattern: "[0-9]{3}-[0-9]{3}-[0-9]{4}"

Option 2: Update the placeholder to match the pattern (no hyphens):

-    placeholder: xxx-xxx-xxxx
+    placeholder: xxxxxxxxxx
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
```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
```
Suggested change
```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
```
🤖 Prompt for AI Agents 
In `@backend/forms.md` around lines 620 - 633, The telephone field's pattern
"[0-9]{3}[0-9]{3}[0-9]{4}" conflicts with the placeholder "xxx-xxx-xxxx"; update
the telephone field to make pattern and placeholder consistent by either (A)
changing the pattern on the telephone entry to accept optional hyphens (e.g.,
allow digits with optional '-' between groups) so "xxx-xxx-xxxx" is valid, or
(B) change the placeholder to a plain 10-digit example (e.g., "xxxxxxxxxx") to
match the current strict digits-only pattern; edit the `telephone` YAML block
(pattern and/or placeholder attributes) accordingly.


- 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 `<input type="tel">`:
- `placeholder`, `maxlength`, `minlength`, `pattern`, `size`, `list`, `autocomplete`, `required`, `readonly`, `disabled`
- `options` will be rendered in a `<datalist>` 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.
Expand Down