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
- 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 02 October 2024
