Addresses container

The Addresses container is a standalone component that creates, edits, and deletes customer addresses. It supports custom address attributes and configurable validation through the Adobe Commerce Admin.

The Addresses container relies on the AddressForm container for address creation and editing. It inherits all behaviors from the AddressForm container.

Container views

The Addresses container can be implemented in several views.

Full-size view

The full-size view is used when the Addresses component functions as a standalone page. This view displays all addresses, enables pagination (based on backend configurations), and provides full functionality for creating, editing, and deleting addresses. A Create Address button can be displayed below the list. Clicking the button opens the address creation form, which is configurable from the Commerce Admin.

The following images illustrate the full-size view of the Addresses container with no addresses, all addresses, and an address being edited.

Full size implementation of the Addresses container with no addresses

Full size implementation of the Addresses container with multiple addresses

Full size implementation of the Addresses container being edited

Minified view

Use the minified view when the container is part of a page with other components, such as a user account dashboard. In this view, editing and deletion functionality is disabled, and the Create New Address button is replaced with a View All Addresses button. Only the default shipping and billing addresses are visible.

The following images illustrate the minified view of the Addresses container with no addresses, and with multiple addresses (but only one is displayed).

Empty minified Addresses container

Minified Addresses container with multiple addresses

Selectable view

The selectable view is intended for scenarios that require address selection, such as during checkout. This view includes styling adjustments and represents each address card as a selectable radio button, facilitating address selection.

The following images illustrate the selectable view of the Addresses container. In the first image an address has been selected. In the second, an address can be created.

Selectable Addresses container with selection

Create an address in a selectable Addresses container

Tip

Custom address attributes and attribute validation are supported. See Customer attribute properties in the Customer Management Guide for more information.

Configurations

The Addresses container provides the following configuration options:

Options	Type	Req?	Description
hideActionFormButtons	boolean	No	Controls the visibility of action buttons at the form's bottom. Useful for custom integrations where form submission is managed externally.
fieldIdPrefix	string	No	Prefixes every form field HTML `id` rendered inside the container. For example, `shipping` produces ids such as `shipping_firstname`. Use different values when you render two `Addresses` containers on the same page (such as shipping and billing forms in checkout) to prevent duplicate HTML element ids.
formName	string	No	Sets the "name" attribute for the form. Defaults to "addressesForm" if not provided. Useful for custom integrations.
slots.AddressCard	slot	No	Allows overriding address card content, such as rendering additional data or changing layout.
slots.AddressFormActions	AddressFormActionsContext	No	Provides an option to override the call-to-action buttons for the address form.
slots.AddressFormInputs	AddressFormInputsContext	No	Allows additional custom inputs or HTML elements at the form’s bottom.
slots[`AddressFormInput_${attribute.code}`]	slot	No	Allows overriding input used for a particular form field. Example slot names: “AddressFormInput_firstname”, “AddressFormInput_street”.
title	string	No	Custom container header text overriding translations.
addressFormTitle	string	No	Custom address form header text overriding translations (optional).
addressesFormTitle	string	No	Custom title for the addresses list section, overriding the default translation.
defaultSelectAddressId	string	No	Used only in selectable view. Determines which address is selected by default.
showFormLoader	boolean	No	Determines if a shimmer loader displays instead of the form. Can be used to manage the form’s loading state externally.
onAddressData	function	No	Callback that runs on each form change, receiving form data as a parameter. Use for custom integrations. Equivalent to the onChange AddressForm callback.
onSubmit	function	No	Custom submit handler that receives the submit event and a boolean indicating whether the form is valid. Overrides the default form submission behavior.
forwardFormRef	HTMLInputElement	No	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.
selectShipping	boolean	No	Applicable only in the selectable view. When set to true, this configuration enables the container to handle the selection of an address as a shipping address (for example, selecting a shipping address during checkout).
selectBilling	boolean	No	Applicable only in the selectable view. When set to true, this configuration enables the container to handle the selection of an address as a billing address (for example, selecting a billing address during checkout). If both "selectShipping" and "selectBilling" are set to true, the container manages the address selection for both purposes, allowing one address to be used during checkout.
showSaveCheckBox	boolean	No	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".)
saveCheckBoxValue	boolean	No	Sets the initial value of the "Save in address book" checkbox.
selectable	boolean	No	Whether to enable/disable the selectable view.
className	string	No	Allows custom CSS classes to be applied to the address container.
withHeader	boolean	No	Whether to show/hide the container header.
minifiedView	boolean	No	Whether to enable/disable the minified view.
withActionsInMinifiedView	boolean	No	Whether to show/hide address card actions in the minified view.
withActionsInFullSizeView	boolean	No	Whether to show/hide address card actions in the full-size view.
inputsDefaultValueSet	CustomerAddressesModel	No	Allows a set of default values for form inputs.
shippingCheckBoxValue	boolean	No	Sets the initial value of the "Set as default shipping address" checkbox.
billingCheckBoxValue	boolean	No	Sets the initial value of the "Set as default billing address" checkbox.
showShippingCheckBox	boolean	No	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.
showBillingCheckBox	boolean	No	Controls visibility of the "Set as default billing address" checkbox. As with the shipping checkbox, it remains present even if hidden.
routeAddressesPage	function	No	Applicable only in the minified view. Determines where the “View all addresses” button redirects the customer.
onSuccess	function	No	Callback that runs on successful form submission. The response includes `addressUid` for proper address identification.
onError	function	No	Callback that runs when an error occurs during submission. Receives the error as a parameter.
headerLevel	1 | 2 | 3 | 4 | 5 | 6	No	Sets the HTML heading level for the container header.
b2bEnabled	boolean	No	Enables the B2B address-book flow. When false, the container uses the standard B2C address APIs.
contextMode	'addressBook' | 'checkout'	No	Sets the context behavior. Use `addressBook` for the permission-enforced company address book, or `checkout` for selectable checkout mode.

Example

The following example demonstrates how to use the Addresses container:

export default async function decorate(block) {
 const {
   'minified-view': minifiedViewConfig = 'false',
 } = readBlockConfig(block);

 if (!checkIsAuthenticated()) {
   window.location.href = CUSTOMER_LOGIN_PATH;
 } else {
   await accountRenderer.render(Addresses, {
     minifiedView: minifiedViewConfig === 'true',
     withActionsInMinifiedView: false,
     withActionsInFullSizeView: true,
     routeAddressesPage: () => CUSTOMER_ADDRESS_PATH,
   })(block);
 }
}