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
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>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
Using primary or secondary buttons
Use a primary button style for the Find Address button if it's the only primary button on the page. Use a secondary button style if there's another primary button, for example to confirm or continue.
There should only be one primary button on a page.
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.
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 multiple text input fields.
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">
Address line 1
</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" for="address-line-2">
Address line 2 (optional)
</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-postcode">
Postcode
</label>
<input class="ds_input ds_input--fixed-10" type="text" name="address-postcode" id="address-postcode" autocomplete="postal-code">
</div>
</fieldset>When to use multiple text inputs
Using multiple text inputs for addresses means you can:
- extract and use specific parts of an address more easily
- give users help for individual text inputs
- validate each part of the address separately
- let users complete the form with their browser’s autocomplete
Potential issues with multiple inputs are that:
- it’s hard to find one format that works for all addresses
- users may not enter information in the way you expect
- users cannot easily paste addresses from their clipboard
Make sure you include enough inputs to handle longer addresses, if you know your users will need them. For example, allow users to include a company name or flat number.
See our form guidance for more information on creating forms.
Use the autocomplete attribute on multiple address fields
Add the autocomplete attribute to each address field to help users enter their address more quickly. This lets you specify the purpose of each input, so browsers can autofill information the user has entered before.
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.