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.

An international address form.

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.
An international address form anatomy.
  • 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.

An international address form layout.

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.

Example showing a Select country dropdown

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.

Example showing generic format
Example showing a generic format.
Best practices
  • Choose the format that best fits the technical capabilities of your app, delivery timescales and required locations.
  • Combine dynamic formats and generic formats if users input international addresses worldwide. You can provide templates using both generic and dynamic formats.

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.

Example showing additional address input.
Example showing additional address input.

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.
Example showing a customized address form.
Example showing a customized address form.

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