Address

Use an address lookup when you are asking users for a Singapore address.

Example

If applicable
If applicable

<div class="mb-3">
    <label for="postalCode" class="form-label">Postal Code</label>
    <input type="text" inputmode="numeric" pattern="[0-9]*" class="form-control" id="postalCode" placeholder="e.g 730317" autocomplete="postal-code" maxlength="6" onkeypress="return onlyNumberKey(event)">
</div>
<button class="btn btn-primary mb-3" onclick="findAddress()">Find Address</button>
<div class="mb-3">
    <label for="streetName" class="form-label">Block/Street Name</label>
    <input type="text" class="form-control" id="streetName" placeholder="e.g. 220 Pasir Ris Drive 50" autocomplete="street-address">
</div>
<div class="mb-3">
    <label for="buildingNumber" class="form-label">Building/House Number</label>
    <div id="buildingNumberText" class="form-text">If applicable</div>
    <input type="text" class="form-control" id="buildingNumber" autocomplete="on" aria-describedby="buildingNumberText">
</div>
<div class="mb-3">
    <label for="unitNumber" class="form-label">Unit Number</label>
    <div id="unitNumberText" class="form-text">If applicable</div>
    <input type="text" class="form-control" id="unitNumber" autocomplete="on" aria-describedby="unitNumberText">
</div>

Usage guidelines

Address lookup should be used:
  • When you're asking users for a Singapore address
Address lookup should not be used:
  • If you have users outside of Singapore and require them to key in their address. Instead, use a manual option such as multiple text inputs or a textarea when you are collecting mostly or only international addresses

Usability guidelines

Avoid changing the default order of address fields
Do ensure that the postal code field is on top as the address lookup can simplify the process of filling out the address field

Default to current date and month
Auto-filling helps users fill forms faster, but don't forget to leave these fields available for editing to give users control


Last updated 22 November 2023
Home


Latest version 2.2.0