Form Subcomponent: Address Fields

The Address Fields subcomponent can only be used within the Form component. The Address Fields subcomponent allows for collection of a customers address details, which can be used to store or update their billing address and/or delivery address. It can be used as part of an acquisition flow, or within self-service.

Screenshot_2023-02-28_at_09.54.03.png

Controlling which fields to display

It is possible to use as many or as few of the fields available in the address fields. To add or remove a field you can update the selection in the Address Fields Included prop.

Rearranging the order of the fields

The order of which the fields are listed in Address Fields Included prop are the order which they will display. To rearrange the the fields, you can remove and re-add them in the desired order.

Component Props

id	Label	Type	Default	Further Info
addressType	Address Type	string	billingDetails	The type of address the form will update. Options are billingDetails and deliveryDetails
heading	Heading	string	Billing address	Optional headin, visible to the user
countryFieldOnTopOfAddress	Show country field at the top of billing/delivery details?	boolean	false	Position where the country input will display. If false, it will appear at bottom.
address1Label	Address line 1 label	string	Address line 1	Label text
address2Label	Address line 2 label	string	Address line 2	For countries that use a Box field (e.g., Belgium), Loqate auto-fills the Box value into Address Line 2, combining it with any existing text.
cityLabel	City label	string	{{city_name_type}}	Label text
stateLabel	County / State label	string	{{state_name_type}}	Label text
postalCodeLabel	Postal code / ZIP code label	string	{{zip_name_type}}	Label text
countryLabel	Country label	string	Country	Label text
companyLabel	Company label	string	Company	Label text
compactAddressPlaceholderText	Compact address form placeholder text	string	Start typing your address...	Placeholder in address line 1 input if is enabled
showCompanyField	Show Company Field?	boolean	false	If true, an input to collect Company will be displayed
invalidAddressMessage	Invalid address message	string	Address is required	Validation message
invalidCityMessage	Invalid city message	string	City is required	Validation message
invalidStateMessage	Invalid state/county message	string	{{state_name_type}} is required	Validation message
invalidPostalCodeMessage	Invalid zip/postal code message	string	{{zip_name_type}} is required	Validation message
componentId	Component Id	string	address-fields	Unique component-id

You are also able to enter in a tooltip for each address field. Each of these are String inputs and are empty by default. When populated, these will display in the checkout when an end user hovers over the tooltip icon by the field.