Phone number

Base pattern

Keep the collection of simple phone numbers easy, use hint text to indicate when you require an area code to be included. When using within an application form, only capture the minimum information you require. This base pattern can be broken down to only ask for one or two of the numbers displayed, or used with additional fields and questions for specific use cases, ie when asking the user to update their details within our secure environment, you may need to allow them to add multiple phone numbers.

Usage example

International phone number: Use this component only when it’s absolutely necessary to capture an international phone number, eg. in the scenario where it is required to deliver or service a product. The dropdown allows the user to select from a list of country codes, rather than have to know the date format required.

Error states

The error message should always sit above the input field to give context. The error icon helps draw the eye by disrupting the flow of text at the starting point of the sentence, and aids in accessibility for those who may be colour impaired and not see the colour change.

Simple phone number with errors

User experience

In order to maximise data capture and keep your form lean, only select the phone number types necessary for compliance, and preferably only one such as mobile (keeping in mind not every customer will own a mobile phone).

These components are purposefully kept simple to satisfy accessibility requirements as well as reduce complexity and ambiguity which comes with shoehorning multiple choices into one field.

Why not field masking? Field masking separates numerical inputs according to a predetermined format to match the real world reference. While this is a good heuristic to abide by, in this instance it causes issues with assistive technologies making playback nonsensical, and thus should be avoided.

Use hint text If there is a specific format required such as an area code, use hint text to communicate this. The back end systems should accept numbers with spaces or without spaces.

Dos and don'ts

• Don't increase or decrease field lengths.
• For Simple phone numbers, don't separate a number into multiple fields.
• For Simple phone numbers, don't demand separated area codes or other specifics.