Information

You appear to be using an unsupported browser, and it may not be able to display this site properly. You may wish to upgrade your browser.

Addresses

Use this pattern to ask users for an address.

About this pattern

This pattern helps users to provide an address using either:

  • address lookup
  • multiple text inputs

Only ask users for an address if this information is needed to deliver your site or service.

The address lookup needs a suitable back-end service to display addresses in response to a postcode search.

Make sure you tell your users what to do if they do not have a permanent address. For example, that they:

  • cannot use the site or service without one
  • need to contact you for help
  • can use a forwarding or temporary address

Address lookup

Sample HTML

<fieldset>
    <div class="ds_question">
        <label class="ds_label" for="address-postcode">
            Postcode
        </label>
        <input class="ds_input  ds_input--fixed-10" type="text" name="address-postcode" id="address-postcode" autocomplete="postal-code">
    </div>
    <button class="ds_button  ds_no-margin--top" type="submit">Find address</button>
</fieldset>
<p><button class="ds_link  ds_no-margin" type="button">Or type in your full address</button></p>

Sample HTML

<dl class="ds_prefilled-value-list" aria-label="Your current answers">
    <dt class="ds_prefilled-value-list__key">Postcode</dt>
    <dd class="ds_prefilled-value-list__value">
        <div>EH6 6QQ</div>
        <button type="button" class="ds_link  ds_prefilled-value-list__value-actions">Change <span class="visually-hidden">your answer for: <q>Postcode</q></span></button>
    </dd>
</dl>
<div class="ds_question">
    <label class="ds_label" for="address">
        Select an address
    </label>
    <div class="ds_select-wrapper">
        <select class="ds_select" name="address" id="address">
            <option value=""></option>
            <option value="address-1">1 Street, Edinburgh, EH6 6QQ</option>
            <option value="address-2">2 Street, Edinburgh, EH6 6QQ</option>
            <option value="address-3">3 Street, Edinburgh, EH6 6QQ</option>
            <option value="address-4">4 Street, Edinburgh, EH6 6QQ</option>
            <option value="address-5">5 Street, Edinburgh, EH6 6QQ</option>
            <option value="address-6">6 Street, Edinburgh, EH6 6QQ</option>
        </select>
        <span class="ds_select-arrow" aria-hidden="true"></span>
    </div>
</div>
<p><button type="button" class="ds_link  ds_no-margin">Or type in your full address</button></p>

The address lookup lets users search for a UK address by entering a postcode. When the user searches for a postcode they are shown a dropdown list of addresses in that postcode.

Users can correct or alter a postcode after they have performed a search, and can have the option of entering an address manually.

When using an address lookup you should:

  • make it clear that it will only work for the country or area where you offer your service, for example UK-only addresses
  • let users enter postcodes in upper or lower case, and with or without spaces

Unsuccessful searches

An error message should show when:

  • an incorrect or invalid postcode is entered
  • the user submits the address lookup with an empty postcode

When no matching addresses are found, you should explain what has happened and help the user understand what to do next.

Sample HTML

<fieldset>
    <div class="ds_question  ds_question--error">
        <label class="ds_label" for="address-postcode">
            Postcode
        </label>
        <p class="ds_question__error-message" id="postcode-error">Please enter a valid postcode</p>
        <input class="ds_input  ds_input--fixed-10  ds_input--error" type="text" name="address-postcode" id="address-postcode" aria-describedby="postcode-error" autocomplete="postal-code" value="Not a postcode">
    </div>
    <button class="ds_button  ds_no-margin--top" type="submit">Find address</button>
</fieldset>
<p><button class="ds_link  ds_no-margin" type="button">Or type in your full address</button></p>

Evidence

Address lookup has been tested as part of a complex form. Users interacted with the address lookup without difficulty and successfully located an address. 

Manual address entry 

The manual address entry pattern uses text input fields.  

Sample HTML

<p><button class="ds_link  ds_no-margin" type="button">Return to postcode lookup</button></p>
<fieldset>
    <legend>Tell us your full address</legend>
    <div class="ds_question">
        <label class="ds_label" for="address-line-1">
            Building and street <span class="visually-hidden">line 1 of 2</span>
        </label>
        <input class="ds_input" type="text" name="address-line-1" id="address-line-1" autocomplete="address-line1">
    </div>
    <div class="ds_question">
        <label class="ds_label  visually-hidden" for="address-line-2">
            Building and street line 2 of 2
        </label>
        <input class="ds_input" type="text" name="address-line-2" id="address-line-2" autocomplete="address-line2">
    </div>
    <div class="ds_question">
        <label class="ds_label" for="address-city">
            City or town
        </label>
        <input class="ds_input" type="text" name="address-city" id="address-city" autocomplete="address-level2">
    </div>
    <div class="ds_question">
        <label class="ds_label" for="address-county">
            County
        </label>
        <input class="ds_input" type="text" name="address-county" id="address-county">
    </div>
    <div class="ds_question">
        <label class="ds_label" for="address-postcode">
            Postcode
        </label>
        <input class="ds_input  ds_input--fixed-10" type="text" name="address-postcode" id="address-postcode" autocomplete="postal-code">
    </div>
</fieldset>

Website analytics

To understand user behaviour, you can track:

Use the Design System’s ‘tracking’ script to add the data attributes automatically.

Back to top