CON-025 | Edit Address - Fresh Food Market

Address Label

Complex / Building Name Optional

Unit / Apartment Number Optional

Street Address

Suburb

City

Postal Code

Delivery Instructions Optional -- helps our drivers find you

Set as default address

Used for new orders automatically

CON-025 | Edit Address

Screen Overview

Type: Form screen with sticky CTA and delete action (no bottom navigation)

Purpose: Edit an existing saved address, update details, or delete the address

Navigation: Back to CON-024; "Update Address" saves and returns to address list; "Delete Address" triggers confirmation

Layout Specifications

Header: White with back button and "Edit Address" title

Content: Same form layout as CON-023 with all fields pre-filled from saved data

Additional fields: "Set as default address" toggle at the bottom of the form

Bottom CTA: Two stacked buttons -- "Update Address" (lime primary) and "Delete Address" (red ghost/text)

Extra bottom padding: ~140px to accommodate the taller sticky CTA with two buttons

Component Specs

Form fields: Same specs as CON-023 but all pre-filled with existing values

Default toggle: Card-style container | 1.5px border | 8px radius | Toggle switch on right side

Toggle switch: 48x28px | Active: #043F2D background | Knob: 22px white circle with shadow

Update button: Full-width | 52px height | Lime #C9F06B | Alexandria 16px Bold

Delete button: Full-width | 44px height | Transparent background | #EF4444 red text | Alatsi 14px Medium

Delete hover: #FEE2E2 light red background

Differences from CON-023 (New Address)

Header title: "Edit Address" instead of "Address Details"

All form fields pre-filled with existing saved data

No pre-filled styling (no gray background on inputs) -- all editable white

Added "Set as default address" toggle

Primary CTA: "Update Address" instead of "Save Address"

Additional "Delete Address" danger button below primary CTA

Behavior Notes

All fields are editable and pre-populated from the saved address

"Update Address" validates and saves changes via API, then returns to address list

"Delete Address" opens a confirmation dialog: "Are you sure you want to delete this address? This action cannot be undone."

If deleting the default address, the next address in the list becomes default automatically

Default toggle can be toggled on/off; only one address can be default at a time

If this is the only saved address, delete should be disabled or show warning

Accessibility

All inputs have associated <label> elements with for attributes

Required fields indicated visually (asterisk) and should include aria-required="true"

Delete button has appropriate color contrast for visibility

Toggle switch should have role="switch" and aria-checked in production

Confirmation dialog for delete should trap focus and be dismissible with Escape key