Skip to content

Search is only available in production builds. Try building and previewing the site to test it out locally.

AddressForm container

The AddressForm container is a standalone component designed for creating and editing customer addresses. This container enables merchants to build a custom user experience around address management while leveraging a pre-built form that minimizes development effort. The form integrates seamlessly with the Adobe Commerce backend environment, providing flexible configuration of address attributes, validation, labels, attribute sorting, and more.

The Addresses container also uses this container.

The following image illustrates a sample AddressForm container:

AddressForm container

AddressForm container

Configurations

The AddressForm container provides the following configuration options:

Options Type Req? Description
hideActionFormButtonsbooleanNo Controls the visibility of action buttons at the form's bottom. Useful for custom integrations where form submission is managed externally.
formNamestringNo Sets the "name" attribute for the form. Defaults to "addressesForm" if not provided. Useful for custom integrations.
showFormLoaderbooleanNo Determines if a shimmer loader displays instead of the form. Can be used to manage the form’s loading state externally.
showSaveCheckBoxbooleanNo Controls visibility of the "Save in address book" checkbox. Useful for implementations where customers can choose to save the address, with form submission managed externally. Enabling this checkbox hides the action buttons automatically (equivalent to setting "hideActionFormButtons" to "true".)
saveCheckBoxValuebooleanNo Sets the initial value of the "Save in address book" checkbox.
forwardFormRefHTMLInputElementNo Provides a reference to the form’s DOM element. Useful for custom integrations. This ref also grants access to the "handleValidationSubmit" method to validate form data.
addressFormIdstringNo Passes an address ID when editing an existing address. Used to identify the address to update in Adobe Commerce.
classNamestringNo Allows custom CSS classes to be applied to the form.
addressesFormTitlestringNo Controls visibility of the address form title.
inputsDefaultValueSetCustomerAddressesModelNo Allows a set of default values for form inputs.
shippingCheckBoxValuebooleanNo Sets the initial value of the "Set as default shipping address" checkbox.
billingCheckBoxValuebooleanNo Sets the initial value of the "Set as default billing address" checkbox.
showShippingCheckBoxbooleanNo Controls visibility of the "Set as default shipping address" checkbox. The checkbox remains in the form even if hidden, allowing shippingCheckBoxValue to set its value.
showBillingCheckBoxbooleanNo Controls visibility of the "Set as default billing address" checkbox. As with the shipping checkbox, it remains present even if hidden.
isOpenbooleanNo Controls the form's visibility.
onSubmitfunctionNo Allows a custom submit handler to override the default form submission behavior.
slots.AddressFormActionsAddressFormActionsContextNo Provides an option to override the call-to-action buttons for the address form.
slots.AddressFormInputsAddressFormInputsContextNo Allows additional custom inputs or HTML elements at the form’s bottom.
slots[`AddressFormInput_${attribute.code}`]slotNo Allows overriding input used for a particular form field. Example slot names: “AddressFormInput_firstname”, “AddressFormInput_street”.
onCloseBtnClickfunctionNo Provides an option to pass a callback to close the form, useful for custom implementations where the form appears in a modal and should close upon successful submission.
onSuccessfunctionNo Callback executed upon successful form submission.
onErrorfunctionNo Callback executed if an error occurs during submission. Receives the error as a parameter.
onChangefunctionNo Callback executed on each form change, receiving form data as a parameter. Useful for custom integrations.

Examples

HTMLInputElement usage sample:

const formRef = { current: null };
provider.render(AddressForm, {
forwardFormRef: formRef,
})(containerWrapper);
const isFormValid = formRef.current.handleValidationSubmit();
const formData = inputRef.current.formData;
return {
handleValidationSubmit,
formData: normalizeGetAddressData(modifyFormRef, true),
isDataValid,
};

isDataValid is a boolean value that indicates whether the form has been validated without an explicit submit action.

inputsDefaultValueSet sample payload:

inputsDefaultValueSet: {
city: 'City',
company: '',
countryCode: 'AR',
region: {
regionCode: 'AR-H',
regionId: 1579,
},
telephone: '123456789',
vatId: '999',
postcode: '12345',
street: 'Street One',
streetMultiline_2: 'Street Two',
}

Example

The following example renders the AddressForm container with custom configurations:

provider.render(AddressForm, {
addressesFormTitle: 'Address form title',
addressId: '',
isOpen: true,
shippingCheckBoxValue: true,
billingCheckBoxValue: true,
showShippingCheckBox: true,
showBillingCheckBox: true,
onChange: (values, inputValue) => {
console.log('allValues', values);
console.log('inputValue', inputValue);
},
onSuccess: () => {
console.log('onSuccess');
},
onError: () => {
console.log('onError');
},
})(containerWrapper);