Skip to content

Commit fa91b1d

Browse files
mjauvinLukeTowers
andauthored
Document tel form field (#255)
Documents wintercms/winter@cab06f5 Co-authored-by: Luke Towers <github@luketowers.ca>
1 parent cd663eb commit fa91b1d

1 file changed

Lines changed: 30 additions & 0 deletions

File tree

backend/forms.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -282,8 +282,10 @@ There are various native field types that can be used for the **type** setting.
282282
- [Range](#range)
283283
- [Section](#section)
284284
- [Switch](#switch)
285+
- [Tel](#tel)
285286
- [Text](#text)
286287
- [Textarea](#textarea)
288+
- [URL](#url)
287289
- [Widget](#widget)
288290

289291
</div>
@@ -681,6 +683,34 @@ show_content:
681683
off: myauthor.myplugin::lang.models.mymodel.show_content.off
682684
```
683685

686+
### Tel
687+
688+
`tel` – renders a single-line input for phone values with built-in browser validation.
689+
690+
```yaml
691+
telephone:
692+
label: Phone number
693+
type: tel
694+
pattern: "[0-9]{3}-[0-9]{3}-[0-9]{4}"
695+
placeholder: xxx-xxx-xxxx
696+
maxlength: 20
697+
minlength: 12
698+
size: 20
699+
required: true
700+
options:
701+
514-123-4567: First Test Phone Number
702+
800-111-2222: Second Test Phone Number
703+
```
704+
705+
- Displays a phone icon on the left in both edit and preview modes.
706+
- In preview mode, renders as a clickable link that opens a phone dialing screen on mobile.
707+
- Supports all standard HTML5 attributes for `<input type="tel">`:
708+
- `placeholder`, `maxlength`, `minlength`, `pattern`, `size`, `list`, `autocomplete`, `required`, `readonly`, `disabled`
709+
- `options` will be rendered in a `<datalist>` element, enabling autocomplete suggestions.
710+
- If an option's value and label are identical, the label is omitted for brevity.
711+
712+
See [Defining field options](#defining-field-options) for the different methods to specify the options.
713+
684714
### Text
685715

686716
`text` - renders a single line text box. This is the default type used if none is specified.

0 commit comments

Comments
 (0)