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:

• Account page
• Checkout page

How should this element be designed?

The address form should be displayed in the following states:

• With a selected country, that has a predefined list of states (provinces)
• With a selected country, that has no predefined list of states (provinces)

Additionally, the design should provide this information:

• Select inputs design should correspond with the base templated filled select input
• Design should display different variants of forms where street quantity is less than default 3 if it affects the display
• Input labels, placeholders (if such is needed), validation messages should be demonstrated
• Designs should be provided for Checkout and Account pages

My account popup

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.

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