Collecting addresses
Use this pattern when you require users to key in their Singapore-based address.
Note: Give your users the option to either key in their postal code to look up their address, or enter their full address manually.
Usage
Below you will find a General Address Format you can use, along with the code needed to build this element.
If applicable
<div class="field">
<label class="label" for="postal-code">Postal Code</label>
<div class="control">
<input class="input col is-4"
type="text"
name="postal-code"
id="postal-code"
autocomplete="postal-code" />
</div>
<button class="sgds-button is-primary margin--top--sm">Find Address</button>
</div>
<div class="field margin--top--lg">
<label class="label" for="street-name">Block/Street Name</label>
<div class="control">
<input
class="input margin--bottom--lg col is-8"
type="text"
name="street-name"
id="street-name"
autocomplete="street-address"
/>
</div>
</div>
<div class="field">
<label class="label" for="building-number">Building/House Number</label>
<span class="hint">If applicable</span>
<div class="control">
<input class="input margin--bottom--lg col is-4"
type="text"
name="building-number"
id="building-number" />
</div>
</div>
<div class="field">
<label class="label" for="unit-number">Unit Number</label>
<div class="control">
<input
class="input margin--bottom--lg col is-4"
type="text"
id="unit-number"
name="unit-number"
/>
</div>
</div>
Guidelines
For your Address Lookup
- Make it clear to users that this will only work with Singapore addresses.
- Use the address lookup only if you are asking for a Singapore address. Otherwise, use multiple text inputs or a text area when asking for addresses outside of Singapore.
For Manually-entered Addresses
- The fields should always have the
autocomplete
attribute to help your users complete it quickly. - You will need to include the
autocomplete
attribute to meet WCAG 2.1 AA for production.
Can't find a component?
Let us know what you need and we’ll be happy to look into it