Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA bottom sheet that shows bookable time slots as a grid of toggle buttons for a chosen day, disables taken slots with a reason, and confirms the slot. Use this when a phone booking flow needs one slot from a day's availability.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it when a phone booking flow needs one slot from a day's availability.
Do not use it for choosing a date (use a calendar) or an exact time of day (use a time field).
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
slots | Slot[] | required | { time, taken? }. |
value | string | - | The chosen time. |
onConfirm | (time: string) => void | required | Called when Confirm is pressed. |
dayLabel | string | required | "Tuesday 14 May", used in the title. |
aria-pressed) in a labelled group; taken slots are disabled and their label says "Taken".The pattern ships with a Testing Library test (time-slot-sheet.test.tsx) that drives it through roles and the keyboard.