Cannot relabel Built In address fields in checkout

[joeyhoer]

In the admin UI, it's possible to change a "Built In" Address Field's Field Name value. Changing the Field Name in the admin would changes the field's label on the registration page and on the my account page, but it does change the label in checkout.

This is the line of code which (I believe) is the issue.

label={
    field.custom ? (
        field.label
    ) : (
        <TranslatedString id={LABEL[field.name]} />
    )
}

Built In fields are not custom, so the TranslatedString value of the LABEL[field.name] is returned.

Here, LABEL is defined as

const LABEL: AddressKeyMap = {
    address1: 'address.address_line_1_label',
    address2: 'address.address_line_2_label',
    city: 'address.city_label',
    company: 'address.company_name_label',
    countryCode: 'address.country_label',
    firstName: 'address.first_name_label',
    lastName: 'address.last_name_label',
    phone: 'address.phone_number_label',
    postalCode: 'address.postal_code_label',
    stateOrProvince: 'address.state_label',
    stateOrProvinceCode: 'address.state_label',
};

The TranslatedString value is then fetched from the translations file. Here, the phone number value will always return "Phone Number".

Essentially, checkout always returns a static value for the label that cannot be changed by the user.

I believe the solution is to use field.label rather than using the lookup to LABEL[field.name].

[bc-peng]

Essentially, checkout always returns a static value for the label that cannot be changed by the user.

Hi there, thanks for raising this. What you’re seeing is actually a deliberate implementation.

My understanding is that this may be related to translation support, as checkout-js now automatically handles multi-lang address form labels. This prevents merchants from editing a single field’s name in one language.

If a merchant does need to update a label, we recommend using a custom checkout and modifying the field labels in the locale JSON files (e.g., en.json).