TC Design
Telephone numbers
Problem
Entering or displaying domestic or international telephone numbers can lead to inconsistent display as telephone numbers can be formatted many different ways.
Solution
When entering domestic telephone numbers only (Canada/US)
Telephone numbers should be restricted to numeric entry only, masked using the 999-999-9999 format (as per the Government of Canada standard). The telephone number should be entered as a single field (rather than 3 separated fields). The suggested format should be included in the label for the field.
When entering international telephone numbers (Canada/US and international)
Telephone numbers numbers should be free-form up to 15 digits (as per the ITU E.164 standard). The telephone number should be entered as a single field (rather than 3 separated fields).
A country selection box for the country code should be available pre-fixed to the telephone number entry-field to indicate to users that this is information that does not need to be entered as part of the telephone number. As part of the country selection, a placeholder should be applied to the telephone number field to suggest the correct format to enter.
If a telephone extension is required, this can be captured separately as an optional field,
When displaying domestic telephone numbers (Canada/US)
Display in the 999-999-9999 format:
When displaying international telephone numbers (Outside Canada/US)
Display as using the format of +{country code} {local telephone number}:
If it’s possible to format the telephone number based on the country code, this is the preferred approach for readability.
The + indicator is a visual cue that the number is international and requires further dialing prefixed (such as 011 in Canada) to dial the number. This also has the added benefit of facilitating sorting of telephone numbers when displayed in a tabular manner.
Use when
Enter a domestic or international telephone number
Displaying a domestic or international telephone number
TC Design