9:41
Delivery Slot
Today
Tomorrow
Wed 12 Feb
Thu 13
Fri 14
Sat 15
10:00 - 11:00 AM
R 29.99
11:00 - 12:00 PM
R 24.99
2:00 - 3:00 PM
FREE
3:00 - 4:00 PM
R 24.99
5:00 - 6:00 PM
FULL
6:00 - 7:00 PM
R 29.99
Confirm
CON-071 | Timeslot Selection
Screen Overview
Type:
Full page with sticky bottom CTA (no bottom navigation)
Purpose:
Allow users to select a delivery date and timeslot
Navigation:
Back to
CON-070
(Checkout Summary); confirm returns to
CON-070
with selected slot
Layout Specifications
Date chips:
Horizontal scrollable row, 24px border-radius, 13px Alexandria semibold
Timeslot cards:
12px border-radius, 1.5px border, 16px padding, full width
Selected state:
Double border effect (1.5px + 1px outline), light green tint background
Disabled state:
50% opacity, grey background, no hover/click, red "FULL" label
Behavior Notes
Date chips scroll horizontally; "Today" is pre-selected
Changing date reloads the timeslot list with available slots for that day
Only one timeslot can be selected at a time
FULL slots are not tappable (disabled state)
FREE slot shown when promotional/threshold conditions are met
Confirm button returns to checkout with the newly selected timeslot
Accessibility
Date chips should be implemented as radio group for screen readers
Timeslot cards use
role="radio"
with
aria-checked
Disabled timeslots have
aria-disabled="true"
Back button has
aria-label="Go back"