Time Slot Picker Shelf

ProNew

Use this when a booking needs a time of day: slot chips as native radios in a free-scroll row, taken slots disabled and marked in text, and a Confirm button that stays explained until one is chosen.

Customize

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.

label

Guide and examples

When to use it

Use it after a day is chosen in an appointment or reservation flow, with ten to thirty slots that may be taken.

Do not use it when times are free-form. Use a time field. For a handful of slots, a plain wrapped list of radios is simpler.

Installation

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.

Props

Prop	Type	Default	Description
`slots`	`Slot[]`	`-`	Each has an id, time text and available flag.
`label`	`string`	`-`	Legend of the group.
`onConfirm`	`(slot: Slot) => void`	`-`	Called by Confirm with the chosen slot.

Accessibility

Slots are native radios in a fieldset; a taken slot is disabled and its name says "taken", so it is never just greyed out.
The chosen time is read out in a polite message; Confirm uses aria-disabled with a reason until a slot is chosen.
Disabled slots are skipped by the arrow keys, as with any radio group.
Keyboard: Left / Right (or Up / Down): choose the previous or next free slot
Keyboard: Enter on Confirm

Testing

The pattern ships with a Testing Library test (time-slot-picker-shelf.test.tsx). Embla needs layout to count snaps, and jsdom has none, so the repo's mockCarouselLayout helper gives the viewport and slides real sizes.