Pattern · Forms
NewAddress Form SwiftUI Block
A shipping or billing address form with AutoFill, a searchable country list, per-country labels and street suggestions.
The address section of a checkout, account or delivery screen. Every line carries its AutoFill type, the country opens a searchable list and relabels the region and postal code for it, and street suggestions from MapKit fill the city, region and postal code when picked. Fields check on Save and then live, and Save shows working, done and failed.
- SwiftUI
- iOS 17.0+
- address-form
$199 once, every piece included. See how installing works · Sign in
01
What's included
SwiftUI source you own, built on Apple frameworks only.
- AutoFill types on every line
- A searchable list of every country and region
- State and ZIP code, County and Postcode, labelled for the country
- Street suggestions from MapKit that fill the rest of the address
- Checks on Save then live, Set as default, and Save with its states
02
Implementation notes
How it behaves, what it handles, and the decisions behind it.
One card holds the fields, each with its label inside its well above what's typed: Full name, Country or region, Street address, Apt, suite or floor, City, the region beside the postal code, and Phone. Every line carries its AutoFill type, so the keyboard offers the person's own address. Country or region opens a sheet listing every country and region in the person's language, with search, and the region and postal code relabel themselves for it: State and ZIP code in the United States, County and Postcode in the United Kingdom, Province and Postal code in Canada, and no region at all where addresses leave it out. As the street is typed, matching addresses drop down over the fields below it, from MapKit by default; picking one fills the street, city, region and postal code and moves on to the apartment line. Fields check themselves when Save address is tapped, then live as they're corrected, and the first one with a problem takes focus. Set as default is a switch on its own card. Save runs your closure with a spinner, a check, or the thrown error's message under it. Pass nil while a saved address loads and the block draws grey shapes in its own layout.
Notes
AddressForm(address:search:countryCodes:saveTitle:onSave:onSuccess:). OnlyaddressandonSaveare required. It is a section: no navigation stack, background, padding or scroll view of its own, so place it in your own column or sheet.AddressForm.AddressholdsfullName,countryCode(ISO 3166, "US"),street,line2,city,region,postalCode,phoneandisDefault. Start a new one withAddress(countryCode:).Address.sampleis Maya's new address from the preview andAddress.filleda complete one.onSavereceives the address with every field trimmed and the postal code uppercased. Return to succeed, throw to fail; a thrownLocalizedError'serrorDescriptionshows under the button, otherwise "Couldn't save this address. Try again." ACancellationErrorgoes back to rest quietly.onSuccessis called once the check has shown; go back or close your sheet there.- Checks on Save: a name, a street and a city; the region where the country needs one; the postal code where it's required, with a 5 or 9 digit check for ZIP codes; and a phone, when given, of at least 7 digits with its area code. Phone and Apt are optional.
AddressForm.Format.format(for:)gives a country's labels, prompts, which parts are required and whether the postal code is digits only. It covers the United States, United Kingdom, Ireland, Canada, Australia, Japan, India, the countries that call it a province, and the European countries that leave the region out; others read Region and Postal code, both optional.searchis anAddressForm.AddressSearch: asuggestclosure that receives what's typed (3 characters or more, after a short pause) and the country code and returnsSuggestions (anid,titleandsubtitle), and aresolveclosure that turns a pick into anAddress, of which the street, city, region, postal code and country are used..mapKit, the default, usesMKLocalSearchCompleterfor suggestions andMKLocalSearchto resolve them. Pass your own provider to use your address service, ornilto turn suggestions off. A failed lookup says "Couldn't look up that address. Type it in instead."countryCodeslimits the list to the countries you ship to. Nil offers every region inLocale.Region.isoRegions.saveTitledefaults to "Save address".- AutoFill:
.name,.streetAddressLine1,.streetAddressLine2,.addressCity,.addressState,.postalCodeand.telephoneNumber. Return moves down the form and Done on the phone saves. ZIP codes and other numeric postal codes get the numbers keyboard. - Haptics: a selection tick when a suggestion fills the fields, a warning when Save finds a problem, success and error when the save lands or fails.
- VoiceOver reads each field by its label with its error as a hint, the country row as a button with the country as its value, each suggestion as one element, and announces refused saves, a filled address and "Address saved". At accessibility sizes the region and postal code stack and suggestions wrap.
- Reduce Motion turns every change into a short fade.
AddressFormExampleat the end ofAddressForm.swiftis the Shipping address screen from the preview, with a stand-in search that offers three addresses on Market Street so every run is the same. Leavesearchout in your app to use MapKit. It reads the theme from the environment; passwrapsInNavigationStack: falseto push it in your own stack.
Theming
- Reads
SPThemefrom@Environment(\.spTheme)and requires thedesign-systemitem. - The fields card and the default card are
color.surfacewithradius.lgand 16 point padding; wells sit 12 points apart, groups 24. - Wells are at least 52 points tall on
fillwithradius.mdand a 1 pointseparatorhairline that turns totextPrimarywhen focused and todangeron an error. Labels inside them aretype.captionintextSecondary(dangeron an error), inputtype.bodyintextPrimary, promptstextTertiary, errorstype.footnoteindanger. - Suggestions float on
surfaceElevatedwith aseparatorring andspShadow(.e3), the one place the block lifts; rows lead with amappin.and.ellipsesymbol intextSecondary, titlestype.body, subtitlestype.footnote. - The switch is
accentwith anaccentOnthumb when on andfillwhen off. Save address isaccentwithaccentOnintype.headline,radius.md, 52 points. - The country sheet lists rows on
surfacewithseparatorlines and atextPrimarycheck, tintedtextPrimary. - States move with
motion.snappy, filled fields and loading withmotion.smooth, presses withmotion.standard.
Requirements
- Network access for the default MapKit search. No Info.plist key or location permission is needed.
03
Keep building
Pieces that work well next to this one.