# Slot Picker

Book a time by placing a block on a day. It snaps to 15 minutes and avoids busy time.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/slot-picker
```

## Usage

```tsx
import { SlotPicker } from '@/components/fetaui/slot-picker'

export function Example() {
  return <SlotPicker title="Intro call" days={days} zone="Eastern Time · New York" onConfirm={book} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| title | string | required |
| subtitle | string |  |
| avatar | ReactNode |  |
| days | SlotDay[] | required |
| lengths | minutes[] | 30, 60, 90 |
| zone | string | Your time |
| host | { name, city, offset } |  |
| from, to | hour | 9, 17 |
| onConfirm | (day, start, minutes) => void or Promise |  |
| failedMessage | string | Could not book this time. Try again. |
| animated | boolean | true |
| className | string |  |

## When to use

- For booking a meeting into a calendar.

## When not to use

- For a free form time: use Time Field.

## Accessibility

- The block is a vertical slider with a text value.
- Days are a radio group.
- Booked is announced.

## Motion

- A dashed ghost follows the pointer.
- The block moves on a 320 and 30 spring, and tracks the pointer one to one during a drag.
- With reduced motion, the block jumps.