Address
Groups of input or text fields that collect address details from users.
The address pattern is a set of input fields intuitively laid out to collect address information. Users can enter their name, country, street address, city, state, ZIP code, country code, and phone number information.
Also known as: Address country code, country selection, address state abbreviations, billing address, mailing address, shipping address.
Anatomy
A. Name fields (required): Text input field for first name and last name to be entered in separate fields.
B. Country field (required): Combobox input field for country selection.
C. Address field (required): Text input field for address entry. The second address line is optional.
D. City, State, and ZIP code fields (required): Text input fields for City, State and ZIP code entry.
E. Country code field (required): Combobox input field for country code entry.
F. Phone number field (required): Numeric input field for phone number entry.
Usage
| When to use | When not to use |
|---|---|
| When user’s address information needs to be collected. | In cases where the user’s address isn’t necessary or the application requires minimal data collection. |
Best practices
- Follow all guidelines found in Input and Combobox when implementing those items in the address pattern.
- Match address information to local region expectations whenever possible.
Familiar formatting
Display content in a format that’s familiar and intuitive to users. Aim to reflect the pattern that the information is usually presented in for that region to make it easier for users to understand the content. Some fields such as postal code or phone number may include text formatting. The order that these fields appear may also be different from the provided layout. Make sure to use the correct labels and address form fields to increase form success.
Name order
In some regions, the last name should be the first field in this set. If this is a billing address, the name should match the name of the registered card holder. Check with your product team and the US Office of Foreign Assets Control (OFAC) for specific business requirements.
Behaviors
Autosuggest
Each region and locale should have an optimized address format, which may be adjusted based on country selection. Autosuggest provides a list of suggested addresses as the user types. The suggestions typically come from a database of known addresses, and the user can select the correct one from the list. This helps in reducing user errors and speeds up the process of filling out the form. Learn more about Autosuggest in Input.
Autocomplete
Enable autocomplete of the rest of the address fields (such as city, state, and ZIP code) once the user completes typing or selects an address from the autosuggest list. Allow free-form input in the main fields in case there are unregistered addresses.
States and provinces
The user selects their state using a combobox. Refer to the Full menu with automatic selection section in the combobox guidelines for complete keyboard and interaction behavior and guidance on autocomplete functionality.
Shortened field width
The shortened width of the field sets user expectations for entering the abbreviation instead of the full name of the state. The list of options will be in alphabetical order.
Typed input
As the user types, highlight in the menu moves to the first matching item. When the user hits enter, the item will be selected.
Reopening the field
When reopened, the menu shows the selected item in the context of the full list of menu items.
Error prevention
Invalid entries won’t be automatically selected. Upon exiting the field, it resets to the last valid entry or its default state.
Country code and phone number
The country code field includes a combobox and can be selected by entering the country code or country name. The phone number field is a numeric input field. This field may include formatting with an area code parentheses, spaces, and dashes.
Content
- Write all content in sentence case, except for proper nouns.
- Follow guidance in Forms when writing form titles, field labels, and inline messages.
Labels
- Limit labels to a few brief words.
- Ensure labels accurately represent the expected input to reduce errors.
- Use parallel structure across labels, using either nouns like “Email” or verbs like “Enter email”.
Inline messages
- Limit all inline messages (including errors) to one to two short sentences with punctuation.
- Use inline messages to provide additional guidance such as format or specific syntax or values to help avoid errors.
- Provide concise, descriptive, and helpful guidance about the field’s usage and necessity, avoiding technical jargon.
Inline error messages
- Use inline error messages to draw attention and to errors without causing frustration.
- Provide clear, prescriptive guidance on correcting the error. Avoid redirecting users to another page to fix it.
- Communicate whether the problem can occur again and offer an alternative backup solution in case it does.
