Addresses
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:
- postcode form submissions via the text input and the "find address" button
- the "change" and "Or type your full address" buttons or the address dropdown
- the validation error message
Use the Design System’s ‘tracking’ script to add the data attributes automatically.
Feedback, help and support
If you need help or support you can e-mail us at designsystem@gov.scot
There is a problem
Thanks for your feedback