Phone numbers

Follow this pattern when you need to ask users for a telephone number.

When to use this pattern

Only ask for a phone number if you genuinely need it. Consider:

• Do you need to contact users urgently?
• Is phone the only way to complete the service?
• Would email or post be sufficient?

How it works

Use a single text input for phone numbers. Allow users to enter their number in the format they prefer.

Basic phone input

<div class="form-group">
  <label class="form-label" for="phone">Phone number</label>
  <span class="form-hint">
    We'll only call if there's a problem with your application.
  </span>
  <input
    class="form-input form-input-width-20"
    id="phone"
    type="tel"
    autocomplete="tel"
  >
</div>

International numbers

If your service accepts international numbers, tell users they can include their country code.

Mobile vs landline

If you need to distinguish between mobile and landline, ask the user directly.

Error messages

If phone number is empty

"Enter your phone number"

If phone number format is invalid

"Enter a phone number, like 01onal 123 456 or +61 2 1234 5678"

If phone number is too short

"Phone number is too short"

Validation

Be lenient with phone number validation:

• Accept numbers with or without spaces
• Accept numbers with or without country codes
• Accept parentheses for area codes
• Accept hyphens between number groups
• Remove non-numeric characters before storing

Accessibility

• Use type="tel" to trigger telephone keyboards on mobile
• Use autocomplete="tel" for autofill
• Do not split phone numbers into multiple fields
• Allow users to enter numbers in their preferred format