Address picker

User needs

This pattern is to help users provide an address, using one of the following:

Address picker
Manual input

(Or, in some cases if no manual input can be provided the user is given an action for how to provide the address)

How it works

The address picker identifies a Stockport address by having users entering their postcode and selecting their address from a list. For occasions where necessary, there is also an option to enter address manually.

Address picker

When using the address picker, you should:

Use inset text with the message: "The address must be in Stockport" to inform the user when the address picker is restricted to Stockport addresses only.
Allow people to enter their postcodes in upper or lower case and with or without spaces.
Provide a manual option – this should be presented as a link and say "I cannot find the address in the list" for example.

Manual input

When using the manual input, you should:

Make all text inputs mandatory except, Address line 2 which is optional.
Accommodate for long addresses using larger character allowances. For example, users who might include a flat number or house name.
Allow people to enter their postcodes in upper or lower case and with or without spaces.

Use the autocomplete attribute on address fields

Use the autocomplete attribute when asking for a user’s address. This lets browsers autofill the information on a user’s behalf if they’ve entered it previously.

If you are asking users to enter their address in multiple fields, set the autocomplete attribute on all fields using:

For fields labelled ‘Postcode’
For fields labelled ‘Address Line 1’
For fields labelled ‘Address Line 2’
For fields labelled ‘Town or city’

Do not spellcheck user’s addresses

To make sure the user’s addresses will not be spellchecked, set the spellcheck attribute to false.

No manual input

Use the GOV.UK Design System 'Details' component instead of manual address input when the user can't find their address in the list and it's a business requirement to have a unique property reference number for the street or property to associate the case to. The component is a link that expands to show some guidance text when a user clicks on it.

The link should always say 'I cannot find the address in the list' and the guidance text when the link expands is configurable depending on the context.

Status

Working progress

Error messages

Use a validation message to identify when the user has failed to provide the information in the format you are expecting. To help the user, you should show the user an error message that allows them to fix the problem.

For styling follow GOV.UK Design System - Error message

Label	Error state	Validation messages
Postcode lookup	If the text field is blank	Enter the postcode
Postcode lookup	If the postcode is in the incorrect format	Enter the postcode in the correct format
Select the address below	If the user hasn't selected an address	Select [your/their] address from the list
Address line 1	If the text field is blank	Enter [your/their] address
Town or city	If the text field is blank	Enter the town or city

Styling decisions

SMBC Design System

The 'Change' link on the Select the address page will always be considered by browsers as a visited link as it will take the user back to the previous page to change their input. It is therefore accepted that this link will always be the 'visited' link colour as per the Design System.