← All Components

TimeSlotPicker

Scheduling

Time slot grid for booking interfaces with loading state and accent color.

Live Demo

Click an available slot to select it. Gray slots are unavailable.

6 times available

Morning

Afternoon

Usage

<script>
  import { TimeSlotPicker } from "jatui"
</script>

<TimeSlotPicker />

Props

PropTypeDefaultDescription
slotsTimeSlot[][]Available time slots
loadingbooleanfalseShow loading state
onSelect(slot: TimeSlot) => void-Selection callback
accentColorstring"primary"DaisyUI accent color