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.

Postal Code

Block/Street Name

Building/House Number If applicable

Unit Number

<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

Request component