# Check-in Code

> An event's check-in code, for a host's phone or a tablet at the door. Faces arrive under it as people scan, and the count opens who is not in yet.

- Name: `check-in-code`
- Status: beta
- Categories: data, display
- File: the install writes `check-in-code.tsx` to your `ui` alias, `@/components/ui` by default.
- Other registry items: `@arbokui/avatar-stack`, `@arbokui/hover-card`, `@arbokui/peek-card`, `@arbokui/qr-code`, `@arbokui/rolling-number`. The install adds them.
- Gallery: https://arbokui.com/components/check-in-code
- Registry item: https://arbokui.com/r/check-in-code.json

## Install

1. Add the registry to `components.json`. Do this first, once:

   ```bash
   npx shadcn@latest registry add "@arbokui=https://arbokui.com/r/{name}.json"
   ```

   The command writes this entry. You can also add it by hand:

   ```json
   {
     "registries": {
       "@arbokui": "https://arbokui.com/r/{name}.json"
     }
   }
   ```

   Without this step, the shadcn CLI looks up `@arbokui` in a public list that Arbokui does not control.

2. Add the theme once per app. It replaces your color tokens with ones checked for contrast:

   ```bash
   npx shadcn@latest add @arbokui/theme
   ```

3. Add the component:

   ```bash
   npx shadcn@latest add @arbokui/check-in-code
   ```

## Use it for

- On a host's phone or a tablet at the door, as people arrive for a workshop or a meeting.
- Pass value, usually the event's check-in link. The code is drawn on the device, so it shows without signal.
- Pass code too, a short one to type, so nothing is camera-only. Digits are easiest on a phone keypad.
- Pass checkedIn, oldest first, and expected. The count rolls and is read out, and reads All 23 checked in, in green, once everyone is in.
- Pass notYet and onCheckIn, and each Not yet row in the count's peek gets Check in, for anyone without a phone or with a flat battery. Their face arrives at once, Undo takes it back for 8 seconds, and onCheckIn runs once the window ends.
- Change value to rotate the code. The new one fades in.
- Use layout="side" on a wide screen, with the code on the left and the details on the right.

## Avoid it for

- A toast for each check-in. The face arriving and the row turning to Checked in already say it.
- Telling people the count by color alone. All 23 checked in says it in words.

## Props

- `value`: `string`. What the code opens, usually the event's check-in link.
- `title`: `string`. The event, like "Workshop". It names the code and the peek.
- `meta`: `string`. When and where, like "Tue 6 Oct · 19:00 · Room 1".
- `hint`: `string`. Default `"Scan with your phone camera to check in"`. What to do with the code.
- `code`: `string`. A short code to type instead, like "482 719".
- `checkedIn`: `{ person: string; photo?: string; at?: string | Date }[]`. Who has checked in, oldest first.
- `expected`: `number`. How many are expected.
- `notYet`: `{ person: string; photo?: string; meta?: string }[]`. Who has not checked in yet, for the peek.
- `onCheckIn`: `(person: { person: string; photo?: string }) => void | Promise<unknown>`. Adds Check in to each Not yet row in the peek. It runs once the undo window ends.
- `peek`: `Partial<PeekCardProps>`. More PeekCard props for the count's peek, like actions: \[{ label: "Remind 9" }\].
- `size`: `"sm" | "md" | "lg"`. Default `"md"`. The code's size: 120, 160, or 240px. Use "lg" on a tablet at the door, so it scans from further off.
- `layout`: `"stack" | "side"`. Default `"stack"`. The code in the middle, or the code left and the details right.
- `className`: `string`. Extra classes. Later classes win.

## Accessibility

- The code is an image named "Check-in code for" and the title.
- The short code is text, so people can read it out or type it.
- The count is a peek trigger. Hover, focus, or a tap opens who is not in yet, then who is in, and Esc closes it.
- A polite live region reads the count each time it changes, like "15 of 23 checked in".
- The faces are hidden from screen readers. The count and the peek say who is in.
- Check in is a native button that slips to Checked in, with Undo, and says so once.
- All 23 checked in is green text in the success tone's soft text, which the theme holds to 4.5:1, and the words say it too.

## Examples

### Large code, with a code to type and the count

```tsx
<Card className="items-center">
  <CheckInCode
    size="lg"
    value="https://example.com/in/team/482719"
    title="Workshop"
    meta="Tue 6 Oct · 19:00 · Engineering · Room 1"
    code="482 719"
    checkedIn={ins}
    expected={23}
    notYet={outs}
    onCheckIn={checkIn}
  />
</Card>
```