An appointment-booking component for UOB branches. Users pick a branch, browse available dates and time slots, and confirm a meeting with a banking representative.
Default
Preferred UOB branch and available slots
UOB Ang Mo Kio
UOB Bedok
UOB Bishan
UOB Bukit Timah
UOB Clementi
No. 53 Ang Mo Kio Avenue 3 #B1-34, AMK Hub, Singapore 569933
We've pre-selected the earliest available slot for you
March 2026
Each appointment is 30 minutes long
Mon, 9 Mar 2026, 9am
States
Preferred UOB Branch and available slots
No. 53 Ang Mo Kio Avenue 3, AMK Hub
We've preselected the earliest slot
March 2026
MON9Mar
TUE10Mar
WED11Mar
THU12Mar
Each appointment is 30 minutes
9:00 AM
9:15 AM
9:30 AM
DefaultInitial state. A default branch, the current month, available dates, and available time slots are shown. The earliest available slot is pre-selected; the chosen date and time appear in UOB Blue.
Preferred UOB Branch and available slots
UOB Ang Mo Kio
UOB Bedok
UOB Bishan
UOB Bukit Timah
UOB Clementi
Branch list openSelecting the branch input opens a list of available UOB branches; the hovered row is highlighted. Selecting a branch closes the list, updates the address, and reloads the available dates and time slots for that branch.
Each appointment is 30 minutes
9:00 AM
9:15 AM
9:30 AM
9:45 AM
10:00 AM
10:15 AM
10:30 AM
10:45 AM
11:00 AM
More slots shownSelecting "Show more times" expands the time slot grid from the default 2 rows up to 4 rows. The link is then removed — the grid stays expanded for the rest of the session.
March 2026
Month arrow — hoverOn hover, the previous/next month arrow highlights to signal it's interactive. Selecting it moves to the adjacent month and refreshes the date carousel.
MON9Mar
TUE10Mar
WED11Mar
THU12Mar
Date card — hoverOn hover, a date card highlights to signal it's selectable. Selecting it moves the card to the active state and refreshes the time slots below.
MON9Mar
TUE10Mar
WED11Mar
Date carousel arrow — hoverOn hover, the carousel's left/right arrow highlights to indicate the row can be scrolled horizontally to reveal more dates in the current month.
Each appointment is 30 minutes
9:00 AM
9:15 AM
9:30 AM
Time slot — hoverOn hover, an available time slot changes background to signal it's selectable. Selecting it fills the slot with UOB Blue. Only one time slot can be selected at a time.
March 2026
MON9Mar
TUE10Mar
WED11Mar
Start of booking windowShown when the user reaches the earliest selectable date. The left arrows on both the month navigator and the date carousel are disabled — users can't go earlier than the booking window allows.
May 2026
WED27May
THU28May
FRI29May
End of booking windowShown when the user reaches the latest selectable date. The right arrows on both the month navigator and the date carousel are disabled — users can't go further than the booking window allows.
Behaviour
Branch selection
Selecting the branch input opens a scrollable list of available UOB branches.
Selecting a branch updates the address field below it with the full street address.
Available dates and time slots are then loaded for the selected branch. A loading state is shown while the data is fetched.
Only one branch can be selected at a time.
Date navigation
Users navigate dates using the left/right arrows on the month navigator and the date carousel.
The month navigator moves the view one month at a time; the carousel scrolls horizontally within the current month.
When the earliest selectable date is reached, the left arrows are disabled. When the latest selectable date is reached, the right arrows are disabled.
Only bookable dates appear in the carousel. Unavailable dates (weekends, public holidays, fully booked days) are either hidden or visually disabled.
Date selection
Selecting a date card moves it to the active state — filled with UOB Blue.
Only one date can be selected at a time; selecting a new date deselects the previous one.
The time slot grid then refreshes to show the slots available on the newly selected date.
Time slot selection
Each time slot represents a 30-minute appointment window.
Only one time slot can be selected at a time.
The default view shows 2 rows of time slots. Selecting "Show more times" expands the grid up to 4 rows; the link is removed once expanded and the grid stays expanded for the rest of the session.
Selecting a time slot updates the booking summary at the bottom with the confirmed branch, date, and time.
Booking summary
Shows a formatted summary of the user's choice: day, date, time, and branch.
Updates in real time as the user changes the branch, date, or time.
Stays visible so users can confirm their choice before proceeding.
Specs
Preferred UOB Branch and available slots1
2
UOB Ang Mo Kio
UOB Bedok
UOB Bishan
UOB Bukit Timah
UOB Clementi
3
No. 53 Ang Mo Kio Avenue 3 #B1-34, AMK Hub, Singapore 569933
4
March 2026
5
MON9Mar
TUE10Mar
WED11Mar
THU12Mar
6
Each appointment is 30 minutes
9:00 AM
9:15 AM
9:30 AM
9:45 AM
10:00 AM
10:15 AM
78
9
Mon, 9 Mar 2026, 9am
10
1
Section label
Names the booking module and groups the branch picker, address, dates, and time slots together.
2
Branch selector
Shows the currently selected branch name.
Acts as the trigger that opens the branch list.
3
Branch list
Scrollable list of available UOB branches.
Highlights the hovered or focused row.
Highlights the currently selected branch.
4
Branch address
Shows the full street address of the selected branch.
Read-only — not editable by the user.
Updates whenever the branch selection changes.
5
Month navigator
Shows the current month and year using the format MMMM YYYY (e.g. March 2026).
Left and right chevrons step between months one at a time.
Arrows are disabled when the booking window's start or end is reached.
6
Date carousel
Horizontal row of available date cards for the current month.
Each card shows the day abbreviation, date number, and month abbreviation.
The active (selected) card is filled with UOB Blue.
7
Duration info
Static helper text about the standard appointment length.
Example: "Each appointment is 30 minutes long".
8
Time slot grid
Shows available time slots as selectable buttons.
Default view shows 2 rows; the expanded view shows up to 4 rows.
The active slot is filled with UOB Blue; only one slot can be selected at a time.
9
Show more times
A text link that expands the time slot grid to reveal more available times.
Disappears once selected — the expanded grid stays expanded for the rest of the session.
10
Booking summary
Shows a formatted summary of the selected branch, date, and time for confirmation.
Updates in real time as selections change.
Dos and Don'ts
Use helper text to set expectations up front — for example, the appointment duration ("Each appointment is 30 minutes long").
Avoid using helper text for step-by-step instructions; keep it brief and informational.