PhoneField
A pattern-based phone number input that automatically formats digits as the user types. Supports UK, US, and international formats. Shows the expected pattern as a placeholder.
Usage
HTML (Auto-init)
<input type="text" class="fw-phone" id="phone">
<script>
FormWidgets.autoInit();
</script>HTML with Data Attributes
<input type="text" class="fw-phone"
data-pattern="+44 ## #### ####"
data-show-pattern="true">JavaScript Initialization
FormWidgets.init('#phone', 'PhoneField', {
pattern: '+44 ## #### ####',
showPattern: true
});Options
| Option | Type | Default | Description |
|---|---|---|---|
| pattern | string | '(###) ###-####' | Phone pattern where # represents a digit. Fixed characters (spaces, parentheses, dashes) are inserted automatically. |
| allowPartial | boolean | true | When true, allows incomplete numbers without showing a validation error. Set to false for strict validation. |
| showPattern | boolean | true | When true, shows the pattern as a placeholder with _ replacing # (e.g. +44 __ ____ ____). |
| icon | string | 'phone' | Name of the SVG icon to use from the internal icon set. |
| required | boolean | false | Marks the field as required. |
Data Attributes
| Data Attribute | Equivalent Option | Example |
|---|---|---|
| data-pattern | pattern | data-pattern="+44 ## #### ####" |
| data-allow-partial | allowPartial | data-allow-partial="false" |
| data-show-pattern | showPattern | data-show-pattern="true" |
| data-required | required | data-required="true" |
Pattern Syntax
The pattern option uses # as a placeholder for each digit. All other characters are treated as fixed formatting and inserted automatically.
| Pattern | Placeholder | Example Output | Use Case |
|---|---|---|---|
(###) ###-#### | (___) ___-____ | (555) 123-4567 | US standard |
+44 ## #### #### | +44 __ ____ ____ | +44 20 7946 0958 | UK landline with +44 |
+44 ##### ###### | +44 _____ ______ | +44 07700 900123 | UK mobile with +44 |
##### ###### | _____ ______ | 07700 900123 | UK mobile local |
### #### #### | ___ ____ ____ | 020 7946 0958 | UK landline local |
+## (###) ###-#### | +__ (___) ___-____ | +1 (555) 123-4567 | International |
UK Number Handling
Auto-remove Leading Zero for +44
When the pattern starts with +44 and the user types 11 digits starting with 0 (e.g. 07700900123), the leading 0 is automatically removed to produce the correct international format: +44 7700 900123.
Features
Auto-formatting
Digits and separators are inserted automatically as you type.
Pattern Placeholder
The pattern is shown with underscores as a placeholder guide.
UK Support
Auto-removes leading 0 when switching to +44 international format.
Any Format
Define any phone pattern — US, UK, international, or custom.