Designing Address Fields for a Better Checkout

Testing and development  |  April 1, 2026  |  2 min read

Address fields are some of the most typed fields on the web. Small design choices save customers time and cut down on delivery problems.

Follow the order people expect

Name, street address, address line 2, city, state, ZIP code. Matching the order of a written address lets people type without thinking.

Use autocomplete attributes

Browsers can fill addresses automatically when fields use the right attributes: address-line1, address-line2, address-level2 for city, address-level1 for state and postal-code for ZIP. This one change can speed up checkout a lot.

Pick the right keyboard

On mobile, use inputmode="numeric" for ZIP codes so the number pad appears, but keep the field type as text so leading zeros stay.

Label everything clearly

Visible labels above fields work better than placeholder text that disappears when the user types. Label line 2 as "Apartment, suite, etc. (optional)".

Consider ZIP-first lookups

Some forms ask for the ZIP code first and fill in the city and state. It is fast, but always let users correct the result, because one ZIP code can serve several city names.

Test the whole flow

Run generated addresses from different states through the form, then check the order confirmation, receipt email, packing slip and shipping label. Formatting bugs often show up only at the end of the flow.