9:41
Delivery Notes
0/200
Quick suggestions
Ring doorbell
Leave at gate
Call on arrival
Use back entrance
Save
CON-072 | Delivery Notes
Screen Overview
Type:
Full page with textarea and suggestion chips (no bottom navigation)
Purpose:
Allow users to add special delivery instructions for the driver
Navigation:
Back to
CON-070
(Checkout Summary); Save returns to
CON-070
with notes saved
Component Specs
Textarea:
160px min-height, 12px border-radius, 15px font, placeholder "Special instructions for the driver..."
Character count:
12px, right-aligned, grey, format "0/200"
Suggestion chips:
20px border-radius, 1.5px border, 14px font. Tapping a chip inserts text into the textarea
Save button:
54px height, lime accent background, sticky at bottom
Behavior Notes
Textarea auto-focuses on screen load for quick input
Character count updates in real-time as user types
Maximum 200 characters enforced by
maxlength
attribute
Tapping a suggestion chip appends the text to the textarea (if not already present)
Multiple suggestions can be combined (e.g., "Ring doorbell. Call on arrival.")
Save persists notes and returns to checkout summary
Accessibility
Textarea has descriptive placeholder text
Character count is associated with textarea via proximity
Suggestion chips are
<button>
elements for keyboard access
Back button has
aria-label="Go back"