# Time slot picker

> Bookable time slots where picking one slides out a confirm button.

Component · Pro · https://lodeui.com/components/time-slot-picker

## When to use

- Booking calls, demos and appointments.

## When not to use

- Free-form times: use a wheel picker or input.

## Installation

```bash
npx shadcn@latest add @lode/time-slot-picker
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { TimeSlotPicker } from "@/components/ui/time-slot-picker";

<TimeSlotPicker title="Thursday, Oct 15" timezone="London (GMT+1)" slots={slots} onConfirm={(slot) => book(slot)} />
```

## API reference

### TimeSlotPicker

A list of slots; the chosen one gets a confirm button beside it.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| slots | `{ value; label; unavailable? }[]` | – | Slots in order. |
| value / defaultValue / onValueChange | `string \| null` | – | Selected slot. |
| onConfirm | `(value) => void` | – | Confirm button pressed. |
| title / timezone / confirmLabel | `string` | – | Header text and button label. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ↑ / ↓ | Move between available slots |
| Enter / Space | Choose |
| Tab | Reach the confirm button |

## Accessibility

- A labelled radio group; unavailable slots are disabled and struck through.
- Booking is announced.

## Motion

- The confirm button grows out of the chosen slot and the slot shrinks to make room.

## Responsive behavior

- Up to 320px; the list scrolls past 320px tall.

## Performance

- Layout animation on the active row only.

## Notes for AI

- Show the visitor's own time zone and convert on the server.

## Related

- [Calendar](https://lodeui.com/components/calendar) — Single-date calendar with month and year jumping, marked days and grid keyboard support.
- [Meeting scheduler](https://lodeui.com/blocks/meeting-scheduler) — Book a call: host card, calendar, time slots and confirmation.