The address form is a set of inputs designed to collect user addresses.

<aside> ℹ️ Usually, styling this element takes from-to: 5-7h

</aside>

Where this element can be seen?

An address form can be found on the following pages:

How should this element be designed?

The address form should be displayed in the following states:

Additionally, the design should provide this information:

My account popup

My account popup

Checkout page

Checkout page

Design example #1

Design example 2

How to develop styles for this element?

The MyAccountAddressForm component is responsible for rendering the address form in MyAccount. By default, you can reach this form in /my-account/address-book by clicking on Edit address or Add new address buttons. The form will be opened in MyAccountAddressPopup.

The CheckoutAddressForm component is responsible for rendering the address form in Checkout. It is available on CheckoutShipping and CheckoutBilling.

Untitled

Differently from the CheckoutAddressForm MyAccountAddressForm have two checkboxes, to mark the address as default shipping and/or billing. CheckoutAddressForm extends MyAccountAddressForm

<aside> ➡️ Street addresses fields quantity is configured in the Magento admin panel, therefore we are not adjusting it in the scope of theme delivery. Mainly we should adjust labels, placeholders, styles, animations, layout.

</aside>

Implementation example #1