International address input

An international address input gives users a set of form fields to input address information for specific countries.

The pattern is a form that displays relevant fields for a user-selected location. You can use it to provide consistent design when implementing International Address Input interactions across your applications. Future versions of the pattern will cover the use of APIs, autocompletion and enhanced support for more locations.

The pattern aims to accommodate users worldwide, but your team may be able to take further steps that fall outside its scope. For example, check with your tech partners if it's possible to detect user location and automatically adjust the form.

Use the pattern when your user needs to enter an address for a specific country. This could be for shipping, contact, legal or compliance purposes, such as client onboarding flow or client detail collection processes.

The pattern consists of various form controls. For layout guidance, please refer to the forms pattern. It comprises two formats: dynamic and generic.

The dynamic format generates templates based on country or region. The templates only display fields relevant to a specific country in a recognizable order and with familiar labels.

For the initial release, dynamic format supports five countries: France, Germany, Spain, the United Kingdom and the United States.

We recommend using templates in a dynamic format with localized language and terms that are more familiar to the user. This will reduce barriers to input and minimize user errors.

Select United States

The generic format provides a single template of international address input for all countries and regions.

Sometimes, using templates may be difficult due to requirements or product scope. In these cases, use the generic format.

There may be cases where users will need an additional address form:

• The client's address may be different from the business address. We recommend a checkbox after the first form for users to select if they need the additional form.
• In some countries, such as China, users must input the address twice: first in English and then in Chinese. Add an additional form in the local language.

Sometimes, you need to customize the address form while considering other information you're collecting based on the product scope.

• You may need an additional form field, e.g., House No..
• You can use the address form alongside other fields. This may include international phone number, email address, banking details, time zone selection and others.

You can add a switch to toggle localization after the country selection, enabling users to compare the form with another address or data source.

If you need to expand the pattern or share feedback with us, please contact the team.