## Time Slots (S—085)

A booking time-slot grid grouped by morning and afternoon, with taken slots struck out and a confirm bar.

- URL: https://sundaeui.dev/components/time-slots
- Category: Forms & inputs · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/time-slots.json`
- Tags: schedule, slots, booking, appointment, time, calendar

Pick a time and the slot fills while a confirm bar rises from the bottom with the chosen time spelled out. Taken slots are struck through and skipped by keyboard.
A 12 / 24 hour switch only changes the labels.

### Usage

```tsx
import { TimeSlots } from '@/components/sundae/time-slots'

<TimeSlots />
```

### Props

- `slots` (`{ time: string; taken?: boolean }[]`, required): Times as "HH:MM" (24h).
- `value / defaultValue` (`string`): Selected time.
- `onConfirm` (`(t: string) => void`): Called on confirm.
- `hour12` (`boolean`, default `true`): Show 12-hour labels.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Appointment, demo and table booking flows.

### When not to use

- Free-form times: use a time input.

### Accessibility

- A radiogroup per period; taken slots are aria-disabled.
- The confirm button names the selected time.
- Reduced motion removes the movement and keeps every state change.