# Slot Picker

Appointment picker with a date strip over morning, afternoon and evening time slots. It shows which slots are filling up and who’s available, and offers a jump to the next open day.

> Composed · Pro · Forms & Inputs — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/slot-picker
```

## Import

```tsx
import { formatSlotTime, SlotPicker } from "@/components/ui/slot-picker/slot-picker";
```

## Variants

- `clinic` — Clinic: `npx @lumioui/cli add pro/slot-picker-clinic`
- `home-tour` — Home tour: `npx @lumioui/cli add pro/slot-picker-home-tour`
- `salon` — Salon: `npx @lumioui/cli add pro/slot-picker-salon`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `days` | `SlotDay[]` | — |
| `day?` | `string` | Controlled selected day id. |
| `defaultDay?` | `string` | Uncontrolled initial day id. Defaults to the first open day. |
| `onDayChange?` | `(dayId: string, day: SlotDay) => void` | — |
| `value?` | `string | null` | Controlled selected slot id. |
| `defaultValue?` | `string | null` | Uncontrolled initial slot id. |
| `onValueChange?` | `(slotId: string | null, slot: TimeSlot | null, day: SlotDay | null) => void` | Fires with the picked slot and its day (null when cleared by a day change in uncontrolled mode). |
| `groupBy?` | `"period" | "none"` | `period` groups into morning / afternoon / evening. Default "period". |
| `periodLabels?` | `Partial<Record<SlotPeriod, string>>` | Override group headings. |
| `columns?` | `2 | 3 | 4` | Slots per row. Default 3. |
| `hour12?` | `boolean` | 12h ("9:30 am") or 24h ("09:30") default labels. Default true. |
| `showMonth?` | `boolean` | Show the month above the strip. Default true. |
| `emptyText?` | `string` | Copy for a day with nothing open. Default "Nothing open on this day". |
| `hideProviders?` | `boolean` | Hide providers on slots even when present (e.g. one-provider clinics). |
| `heldLabel?` | `string | null` | On a picked slot with providers, the faces swap in place to this line.  Pass null to keep the faces. Default "Held for you". |
| `booked?` | `boolean` | The picked slot is booked: it stamps `bookedLabel`, one sheen crosses,  and `onSettled` fires after a 700ms hold. |
| `bookedLabel?` | `string` | Stamp on a booked slot. Default "Booked". |
| `onSettled?` | `() => void` | Fires once the booked stamp has held — resolve the screen from here. |
| `className?` | `string` | — |

Source: https://lumioui.com/components/slot-picker