Time slot pickerPro
Bookable time slots where picking one slides out a confirm button.
Thursday, Oct 15
London (GMT+1)
When to use
- Booking calls, demos and appointments.
When not to use
- Free-form times: use a wheel picker or input.
Installation
Usage
Import it from @/components/ui/time-slot-picker after installing.
example.tsx
import { TimeSlotPicker } from "@/components/ui/time-slot-picker";
<TimeSlotPicker title="Thursday, Oct 15" timezone="London (GMT+1)" slots={slots} onConfirm={(slot) => book(slot)} />API reference
TimeSlotPicker
A list of slots; the chosen one gets a confirm button beside it.
| Prop | Type | Default | Description |
|---|---|---|---|
| slots | { value; label; unavailable? }[] | – | Slots in order. |
| value / defaultValue / onValueChange | string | null | – | Selected slot. |
| onConfirm | (value) => void | – | Confirm button pressed. |
| title / timezone / confirmLabel | string | – | Header text and button label. |
Keyboard interactions
| Keys | Action |
|---|---|
| ↑or↓ | Move between available slots |
| EnterorSpace | Choose |
| Tab | Reach the confirm button |
Accessibility
- A labelled radio group; unavailable slots are disabled and struck through.
- Booking is announced.
Motion
- The confirm button grows out of the chosen slot and the slot shrinks to make room.
Responsive behavior
- Up to 320px; the list scrolls past 320px tall.
Performance
- Layout animation on the active row only.
Notes for AI
- Show the visitor's own time zone and convert on the server.
This page as Markdown, for assistants and coding agents:
/components/time-slot-picker/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt