Street picker

Contents

– User needs
– How it works
– Status
– Error messages
– Styling decisions
– Accessibility statement
– Examples
– Discuss this pattern

---

User needs

This pattern is to help users provide a street location via "Street lookup".

How it works

The street picker identifies a Stockport street by having users entering a street name and selecting from a drop-down list.

Street picker

When using the address picker, you should:

• Use inset text to inform the user there is a restriction to Stockport streets only.
• Allow people to enter a street name in upper or lower case.

Do not spellcheck user’s input

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

Status

Working progress

Error messages

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

For styling follow GOV.UK

Label	Error state	Error messages
Street lookup	If the text field is blank	Enter the street name
Select the street below	If the user hasn't selected a street	Select the street from the list

Styling decisions

SMBC Design System

The 'Change' link on the Select the street 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.

Accessibility statement

This pattern has a rating of AA.

Accessibility testing is the process of testing the pattern for ease of use with specific disabilities. Please see our accessibility guidelines.

Improvements

To make it AAA, we need to:

• Add...

Examples

Axure mockup - street picker

Discuss this pattern