CON-023 | Address Details Form

Address Label

Complex / Building Name Optional

Unit / Apartment Number Optional

Street Address

Suburb

City

Postal Code

Delivery Instructions Optional -- helps our drivers find you

CON-023 | Address Details Form

Screen Overview

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

Purpose: Collect and confirm detailed address information, including optional fields for complex/unit and delivery instructions

Navigation: Back to CON-022; "Save Address" saves and navigates to home or address list

Layout Specifications

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

Content: Scrollable form with 16px padding

Bottom CTA: Fixed at bottom, white background, top border shadow, full-width button

Form spacing: 20px gap between form groups

Component Specs

Address label chips: 36px height | Pill-shaped | 1.5px border | Active: #043F2D fill + white text | Inactive: white fill + gray border

Form label: Alatsi 12px Medium | #6B7280 | Required fields show red asterisk

Form input: 48px height | 4px radius | 1.5px #D1D9CE border | Focus: green border + shadow ring

Pre-filled inputs: Background #F5F7F4 to indicate auto-filled values

Textarea: Min-height 96px | Resizable vertically

Helper text: Alatsi 12px | #9CA3AF

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

Form Fields

Address Label: Chip selector -- Home (default), Work, Other | Required

Complex/Building Name: Text input | Optional

Unit/Apartment Number: Text input | Optional

Street Address: Text input | Required | Pre-filled from geocode

Suburb: Text input | Required | Pre-filled from geocode

City: Text input | Required | Pre-filled from geocode

Postal Code: Text input | Required | Pre-filled from geocode | Max-width 140px

Delivery Instructions: Textarea | Optional | Placeholder guidance text

Behavior Notes

Pre-filled fields are populated from geocoding data (map confirmation screen)

Users can edit pre-filled values if geocoding was inaccurate

"Save Address" validates required fields, then saves via API

On success: navigate to home screen (onboarding) or address list (profile)

On error: show inline field errors with red border and error text

Only one label chip can be active at a time (radio behavior)

Accessibility

All inputs have associated <label> elements with for attributes

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

Label chips use <button> elements for keyboard accessibility

Form is scrollable with sticky CTA always visible