We use cookies to collect anonymous data to help us improve your site browsing experience.

Click 'Accept all cookies' to agree to all cookies that collect anonymous data. To only allow the cookies that make the site work, click 'Use essential cookies only.' Visit 'Set cookie preferences' to control specific cookies.

Set cookie preferences

Your cookie preferences have been saved. You can change your cookie settings at any time.

Pattern

Addresses

Published 1 February 2022

Use this pattern when you need to ask users for addresses. This could be their own address or an address of a third party.

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 get addresses in response to a postcode search.

About this pattern

This pattern helps users to provide an address using either:

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

Open this example in a new window

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">Or type in your full address</button></p>
Open this example in a new window

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 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 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
Open this example in a new window

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">Or type in your full address</button></p>

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

Manual address entry

Open this example in a new window

Sample HTML 

<p><button class="ds_link  ds_no-margin">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>

Using multiple text inputs instead of a single text area means:

  • users can complete the form quickly using their browser’s autocomplete function
  • you can show hint text to help users complete individual fields
  • you can validate address data and process it more easily

When using multiple text inputs, you should:

  • only make fields mandatory if you really need the information
  • make text inputs an appropriate size for the expected content length
  • let users enter postcodes in upper or lower case, and with or without spaces
  • give users a way to return to the address lookup

Use autocomplete on address fields

It is best practice to use the autocomplete attribute on the postcode search and manual address input fields. This lets the user’s browser autofill information on the user’s behalf if it has been entered previously.

Allowing autocomplete is beneficial because it:

  • speeds up completion as users do not have to manually input their information
  • reduces the risk of typos

Why we use this pattern

An address lookup makes it easier for users to provide an address. Use an address lookup when you need a user’s address to deliver them your service.

Our design is based on guidance in the GOV.UK Design System.

Evidence

Existing pages with address lookups seem to perform well with high user satisfaction.

There was an address lookup on gov.scot for citizens to find out which Covid protection level applied to where they lived. During the period that it was live:

  • Only 22.5% of users bounced. Of the remainder, 90% of users who loaded the Covid lookup completed the address lookup form. Some users used the lookup tool more than once in a session.
  • 96% of users on the Covid lookup gave positive feedback (site average is 75% positive).
  • 17% of users received an error for an incorrect postcode on the Covid lookup

Website analytics

Content of this form element should not be routinely tracked through website analytics. This is due to the risk of gathering personally identifiable information. As per the tracking script, interaction with the element would be tracked, provided that each field has a unique data attribute, input name, and identifiable class.

See our page on tracking for more information.

Feedback, help or support

If you need any help or want to give any feedback you can e-mail us at: designsystem@gov.scot

Back to top