Phone Number

Use this pattern when you need to ask users for their phone number

Example

+65

 
<div class="sgds form-group">
    <label class="form-label" for="phone">Phone Number</label>
    <div class="input-group">
      <span class="input-group-text">+65</span>
      <input class="form-control" type="text" id="phone" autocomplete="tel-local" pattern="[0-9]" maxlength="8" />
    </div>
</div>

                

Usability guidelines

Explain the rationale of requesting for users' phone number.
This allows users to:

  • Feel assured that their phone number will not be misappropriated.
  • Choose which phone number they prefer to use.

Make sure it works for all users

  • Your text field should accommodate only numbers and 8 characters.
  • Set the autocomplete attribute to tel-local so that browsers can fill in their phone number if they have entered in previously.

Home


Previous version 2.0.0