Address

Help your users fill in their addresses


General Address Format

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>

When you should use this pattern

Use this pattern when you want to ask users for a Singapore address. You should allow users to key in their postal code to lookup their address and also allow them to enter it manually.


Guidelines

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, else use use multiple text inputs or a text area when asking for addresses outside of Singapore.

Entering manually

  • 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