Address

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>
    <div>
        <button class="sgds-button is-primary margin--top--lg">Find Address</button>
    </div>
</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-address"
            id="street-address"
            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"
            autocomplete="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.

Feedback

Having troubles with the guide? Please give us more details and we'll get back to you soon.

Chat with the team