Country Codes in Address Forms — Building International Address UIs

Address Forms and Country Codes

International address formats vary wildly. The country code is the key that determines which fields to show, how to label them, and what validation to apply.

Format Variations by Country

Country	Postal Format	State/Province	Example
US	5 digits or 5+4	State (required)	10001, 90210-1234
UK	Alphanumeric	—	SW1A 1AA, EC2R 8AH
JP	7 digits (NNN-NNNN)	Prefecture	100-0001, 150-0002
DE	5 digits	—	10115, 80331
CA	A1A 1A1	Province (required)	K1A 0B1, V6B 3K9
BR	8 digits (NNNNN-NNN)	State (required)	01310-100
AU	4 digits	State (required)	2000, 3000
IN	6 digits	State (required)	110001, 400001

Address Field Order

Different countries expect different field orderings:

US:  Name → Street → City → State → ZIP → Country
JP:  Postal → Prefecture → City → Street → Name
DE:  Name → Street → PLZ → City → Country
BR:  Name → Street → Number → Complement → City → State → CEP

Dynamic Form Adaptation

const ADDRESS_CONFIG = {
  US: {
    fields: ['line1', 'line2', 'city', 'state', 'postalCode'],
    stateLabel: 'State',
    postalLabel: 'ZIP Code',
    postalPattern: /^\d{5}(-\d{4})?$/,
    stateRequired: true,
  },
  GB: {
    fields: ['line1', 'line2', 'city', 'postalCode'],
    postalLabel: 'Postcode',
    postalPattern: /^[A-Z]{1,2}\d[A-Z\d]?\s*\d[A-Z]{2}$/i,
    stateRequired: false,
  },
  JP: {
    fields: ['postalCode', 'state', 'city', 'line1', 'line2'],
    stateLabel: 'Prefecture',
    postalLabel: 'Postal Code',
    postalPattern: /^\d{3}-?\d{4}$/,
    stateRequired: true,
  },
  DE: {
    fields: ['line1', 'line2', 'postalCode', 'city'],
    postalLabel: 'PLZ',
    postalPattern: /^\d{5}$/,
    stateRequired: false,
  },
};

function getAddressConfig(countryCode) {
  return ADDRESS_CONFIG[countryCode] || ADDRESS_CONFIG['US'];
}

Google Libaddressinput

Google maintains an open-source library for international address formatting. It provides validation rules for every country indexed by ISO 3166-1 alpha-2 codes:

https://chromium-i18n.appspot.com/ssl-address/data/US
https://chromium-i18n.appspot.com/ssl-address/data/JP
https://chromium-i18n.appspot.com/ssl-address/data/DE

Accessibility Considerations

• Use the country dropdown to dynamically update field labels (ZIP vs Postcode vs PLZ)
• Provide autocomplete attributes: autocomplete="country", autocomplete="postal-code"
• Ensure the form works with screen readers by updating aria-labels when the country changes
• Support keyboard navigation in the country dropdown