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.