Slot Picker

Time slot grid for slot-inventory products (activities, tours, classes, transfers). Slots are grouped into Morning / Afternoon / Evening. Handles available, limited (spots-left badge), sold-out, and closed states. Loading skeleton and empty state included.

core/slot-picker

Installation

1 · Add registry to components.json

2 · Install component

Examples

Default

Available, limited, and sold-out slots with loading and empty states.

With available / limited / sold-out states

Mon 14 Apr

Morning

Afternoon

Evening

Loading skeleton

Empty state (no slots)

No tours available on this date. Try a nearby date.

API Reference

Prop	Type	Default	Description
`slots`req	`TimeSlot[]`	—	Available time slots to render.
`value`req	`string \| undefined`	—	Currently selected slot ID.
`onChange`req	`(slotId: string) => void`	—	Called when the user selects a slot.
`loading`	`boolean`	`false`	Shows a loading skeleton.
`dateLabel`	`string`	—	Date label shown in the header (e.g. Mon 14 Apr).
`emptyMessage`	`string`	`"No time slots available for this date."`	Message shown when slots is empty.