International address form

An international address form gives users a set of form fields to input address information for specific countries. The form displays relevant fields for a user-selected location.

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.

Future versions of this pattern will cover the use of APIs, autocompletion and enhanced support for more locations.

Use it 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.

1. Address form elements: Allows the user to input their details such as their name, address, postal code, town/city and optionally their state/province.
2. Country selector: Allows the user to select the correct country for their address.

• Use Input to display the address form elements.
• Use Dropdown to display the country selector.
• Use StackLayout to display the pattern elements in a column.

For further layout guidance, please refer to the form pattern.

The dynamic format uses form field labels specific to a country or region. The form only displays fields relevant to a specific country in a recognizable order and with familiar labels. This will reduce barriers to input and minimize user errors.

Select United States

The generic format uses a single international address form 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. For example, where 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.

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.

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