Address Card + Form

Demo & usage

More examples

<sv-address-card [address]="a" [selectable]="true" [selected]="a.id === selectedId()" (addressSelected)="selectedId.set(a.id!)" />

<sv-address-card [address]="a" [saving]="saving()" [actionError]="error()" (remove)="onRemove($event)" />

<sv-address-card [address]="a" [defaultCandidates]="others(a)" (remove)="onRemove($event)" />

<sv-address-form [value]="current" (save)="save($event)" (cancelled)="close()" />

<sv-address-form [schemas]="[...DEFAULT_ADDRESS_SCHEMAS, MALTA]" (countryChange)="reverify($event)" />

<sv-address-form [verification]="{ status: 'unavailable' }" (save)="save($event)" />

<sv-address-form [verification]="{ status: 'corrected', suggestion: fixed() }" (suggestionApplied)="recheck($event)" />

When to use

• The account "Addresses" page and the checkout shipping / billing address picker.
• You want a consistent, premium address display with default and type badges.
• Pair the card (display) with the form (add / edit) for a complete address book.
• You ship outside the United States. The form asks for what the country actually has, so nobody has to invent a county or a postal code to get past validation.
• You verify addresses against a third-party service and need "we could not reach it" to be a different state from "this is wrong".

Async states

None — this component has nothing to load, so it has no loading, empty or error state to drive.

Server writes

Writes

• remove
• setDefault

Each payload carries a requestKey — send it with the request so a retry cannot apply the same change twice.

Rollback

None — this component renders a single item out of a collection you own, so there is nothing here to put back. It asks for confirmation first instead, and the item only moves when you change the data.

While saving

Bind saving to stop the action being repeated while the request is out.

On failure

Pass the failure to actionError to show it in place — without taking away what the user was working on.

Outputs

<sv-address-form>

Also in this family — SvAddressFormComponent from @styloviz/commerce.

Inputs

Outputs

Customization & theming

• Label, default badge and shipping / billing kind badge on the card.
• Toggle edit / remove / set-default actions individually.
• Selectable radio mode with a stretched click target and check indicator.
• `schemas` replaces the old `countries: string[]`: each entry declares its own field list, labels, order, required-ness, autofill token, input mode and — where the subdivisions are a closed set — a dropdown of options. Twelve are built in as `DEFAULT_ADDRESS_SCHEMAS`, chosen to cover every shape rather than to be a world list.
• Form wording: `countryLabel`, `title`, `submitLabel`, `cancelLabel`, and optional label / default-toggle / cancel.
• Verification wording is yours: pass `message` for an already-translated sentence, or leave it out for the built-in one per status.

Best practices

• Do: Use `selectable` cards as a radio group in checkout; keep one `selected` at a time.
• Do: Bind the form's `value` to edit — it repopulates automatically when the value changes.
• Do: Handle `save` for `{ address, verification }`; the address carries the original `id` in edit mode, and only the active country's fields are in it.
• Tip: Hide card actions with `showActions="false"` inside a read-only order summary.
• Do: Send `event.requestKey` with the delete and ignore a key you have already applied — a retried request must not remove the address that took its place.
• Do: Bind `[saving]` while the write is out and report the failure through `[actionError]`. The card has no `rollback()` on purpose: the address book is yours, so nothing is applied until your list changes.
• Don't: Leave `[confirmRemove]` on when the page runs its own confirm dialog — the user is then asked to confirm the same deletion twice.
• Do: Pass `[defaultCandidates]` on every card, and apply `nextDefaultId` in the SAME request as the delete. An interrupted round-trip otherwise leaves an account with no default address.
• Don't: Rewrite `isDefault` on every remove. Gate it on `event.wasDefault` — a non-default removal reports no successor, so an unconditional `isDefault: a.id === nextDefaultId` clears the badge off the address that still holds it.
• Do: Store `event.verification` next to the address. "Verified" and "we never managed to check" are different records, and only one of them is worth re-checking before the next shipment.
• Don't: Map a verifier timeout onto `failed`. That is what `unavailable` is for — a boolean turns every outage at a third party into lost orders.
• Don't: Add a country by copying the US schema and renaming the region. Check whether the region is required, whether it exists, and where the postal code sits in the order.

Accessibility

• Selectable cards expose role="radio" + aria-checked with a full-card click target.
• The address renders in a semantic <address> element; action buttons have descriptive labels.
• Form fields have associated labels, aria-invalid on error, and inline required-field messages; visible focus in light and dark mode.
• Every id is instance-scoped, so a checkout showing a shipping and a billing form together does not point both sets of labels at the first form's inputs.
• Optional fields say "(optional)" in words. An asterisk on the required ones leaves the reader to guess which convention is in play.
• The verification strip is `aria-live="polite"`, not an alert: the verdict arrives while the person is still typing, and an assertive region interrupts them mid-field. `verifying` also sets `aria-busy`.
• The remove confirmation is a `role="group"` with its own label, and it follows the trash button in the DOM so it is the next tab stop from the control that opened it.
• Removing the default names that fact in the heading, and the successor dropdown has a real `<label>` — the choice is not left to a colour or a badge position.