Allow users to choose a date and a time slot. Months are stepped through a single navigator bar, available dates sit in a horizontal strip, and the slots for the chosen date fill a responsive grid below it.
Default
Date *
Month
Please select a date
Time slot *
Each appointment is about 15 minutes.
Please select a time slot
States
Date *
Aug 2026
Time slot *
Each appointment is about 15 minutes.
DefaultHow the component loads. The navigator opens on the current month and the first selectable date is already chosen, so there is always a time grid to work with. No time slot is picked yet.
Date *
Aug 2026
Aug 2026
Sep 2026
Oct 2026
Nov 2026
Month SelectionThe centre of the navigator bar is a combobox. Opening it thickens the bar border and lists every month in the booking window. The month on screen is highlighted.
Date *
Jul 2027
Month (Earliest/latest)The previous arrow is disabled in the first month of the window and the next arrow in the last. Disabled arrows turn light grey and show a not-allowed cursor rather than disappearing.
Date (Available/selected)Available dates are borderless grey chips showing day, date, and month. The selected chip fills with UOB Blue and turns white. Hovering an unselected chip fills it with the lighter hover blue.
Date (Read-only)Dates outside the bookable range are greyed and disabled. They stay tappable, because tapping one previews that day's slots without committing a selection.
Date (Preview time slot)The read-only date being inspected keeps its grey text but swaps to a white fill with a grey outline, so it reads as "looking at" rather than "chosen". The committed selection keeps its blue fill throughout.
Date (Scrollable)When the month holds more dates than fit, the strip scrolls sideways and a pair of chevrons appears underneath on desktop.
Time slot *
Each appointment is about 15 minutes.
Time slot (Available/selected)Each slot shows the start time in large blue digits with the meridiem(AM/PM) set smaller beside it. The chosen slot fills with UOB Blue.
Time slot *
Each appointment is about 15 minutes.
Time slots (Past on today)On the current day, slots that have already passed stay in the grid as disabled buttons with a diagonal strikethrough. Later slots remain selectable. This is not the same as read-only date preview.
Time slot *
Each appointment is about 15 minutes.
10.00AM
10.15AM
10.30AM
Time slots (Read-only date preview)Shown while inspecting a read-only date outside the bookable range. Every slot is a non-interactive cell with a diagonal strikethrough; the grid is not selectable.
No appointment slots are available this month. Try the next month.
No slots availableInform users about availability.
Time slot *
Each appointment is about 15 minutes.
Please select a time slot
ErrorTriggered when validation fails, when a time slot is not selected.
Behaviour
Data source
Dates, time slots, and availability are extracted via API.
Month navigation
Months are handled by one bar: arrows on each end step one month, and the centre label opens a list of every month in the booking window.
The window is extracted from the API dates. The arrow at each end of the window is disabled rather than hidden.
Changing month rebuilds the date strip and, if the new month has a selectable date, selects the first one.
Date strip
Only dates from API will appear.
If a month ends up with nothing to show, the empty message will be displayed.
The strip scrolls sideways with the scrollbar hidden. On desktop, chevrons appear underneath only when the chips actually overflow.
Date selection
One date at a time. Selecting a date clears any chosen time and rebuilds the slot grid for that day.
On load, the first selectable date in the month is chosen automatically.
Dates outside the bookable range stay visible and greyed. Tapping one previews its slots without committing anything — the previously selected date keeps its blue fill. This allows user to anticipate the availability.
The preview clears as soon as a bookable date is selected.
Time slot selection
Slots are supplied by the API.
Times read as 10.00 AM, with the digits large and the meridiem smaller alongside.
On the current day, slots that have already passed stay in the grid as disabled (grey with a diagonal strikethrough); later slots remain selectable. This is separate from read-only date preview (dp2-times--preview), where every slot is non-interactive.
The whole grid is shown at once.
The grid automatically adjusts to three or four columns based on the width of the container.
While a read-only date is being previewed the grid becomes non-interactive.
Validation
Date and time slot are both required and each has its own error line below the field.
Specs
Date *1
Aug 2026
2
3
Time slot *4
Each appointment is about 15 minutes.
5
6
1
Date label
Recommended max 45 char (include spaces).
Max 90 char (include spaces).
2
Month navigator
3
Date strip
4
Time slot label
Recommended max 45 char (include spaces).
Max 90 char (include spaces).
5
Helper text (Optional)
Provides additional guidance or contextual information.